0

execComand insertHTML を介して div に挿入された要素で jQuery トグルが機能しない

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="application/javascript">
$(function() {
    $("#paste").click(function() {
       document.execCommand("insertHTML", false, "<div class='foobar'><p class='foo'>Spoiler</p><p class='bar'>" + window.getSelection().getRangeAt() + "</p></div>"); 
    });

    $(".foo").each(function() {
        $(this).click(function() {
            $(this).next().toggle();  
        })
    });
});

</script>
<style>

.content {
    widt:300px;
    height:200px;
    border:1px solid #000;
    margin-bottom:10px;
}

.foo {
    border:1px solid #000;
    cursor:pointer;
} 

.bar {
   border:1px solid #000; 
}
</style>
</head>
<body>
<button id="paste">Spoiler</button>
<div contenteditable="true" class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sapien diam, id ornare eros pulvinar quis. Nam volutpat consequat tellus nec gravida. Proin vestibulum nisl a adipiscing semper. Sed bibendum tortor ligula, ac ultricies nulla bibendum vitae. Morbi a leo tortor. Vestibulum tincidunt placerat erat, eu vulputate nisi elementum quis. Quisque ac odio in massa hendrerit aliquam ut a diam. Pellentesque nunc nibh, fringilla nec lectus vel, dictum tincidunt arcu.</div>
</body>
</html>

デモはこちら

4

1 に答える 1

0 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="application/javascript">
$(function() {
    $("#paste").click(function() {
       document.execCommand("insertHTML", false, "<div class='foobar'><p class='foo'>Spoiler</p><p class='bar'>" + window.getSelection().getRangeAt() + "</p></div>");
    $(".foo").unbind();
    $(".foo").each(function() {
        $(this).click(function() {
            $(this).next().toggle();  
        })
    });

    });
});

</script>
<style>

.content {
    widt:300px;
    height:200px;
    border:1px solid #000;
    margin-bottom:10px;
}

.foo {
    border:1px solid #000;
    cursor:pointer;
} 

.bar {
   border:1px solid #000; 
}
</style>
</head>
<body>
<button id="paste">Spoiler</button>
<div contenteditable="true" class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sapien diam, id ornare eros pulvinar quis. Nam volutpat consequat tellus nec gravida. Proin vestibulum nisl a adipiscing semper. Sed bibendum tortor ligula, ac ultricies nulla bibendum vitae. Morbi a leo tortor. Vestibulum tincidunt placerat erat, eu vulputate nisi elementum quis. Quisque ac odio in massa hendrerit aliquam ut a diam. Pellentesque nunc nibh, fringilla nec lectus vel, dictum tincidunt arcu.</div>
</body>
</html>

私は解決策を見つけました。イベントリスナーは、最初はdomにあった要素をリッスンしますが、後で挿入された要素はリッスンしません。したがって、解決策は、リスナーのバインドを解除して再度バインドすることですhttp://jsfiddle.net/YDvSe/4/

于 2013-08-11T18:46:49.887 に答える