0 
$(document).ready(function(){

$('#add').click(function(){
    $('#list-area').append("<div class='list-item'><div class='box'><div class='dot'>&#x2713;</div></div></div>");

    $('.box').click(function(){
        $(this).children('.dot').toggle(200);
    });
});

});

ここに、すべてのコードへの jsfiddle リンクがあります。

http://jsfiddle.net/96UVW/1/

これは、私が作成しているチェックリストの初歩的な複製です。これがどのように機能するか（または機能するはずです）は次のとおりです。

・「+」をクリックして項目を追加します。(これは正常に動作します。)

-緑色のボックスをクリックしてチェックを外すか、もう一度クリックしてチェックを外します...

...これは動作がおかしいです。私が望むのは、「.box」をクリックすると、それぞれの「.dot」子要素が一度表示を切り替える必要があるということです。しかし何が起こるかというと、アイテムの数に応じてトグルが繰り返されます。

問題を明確に確認するには、5 つの項目を追加して、緑色のボックスをクリックします。一番上は5回トグルし、次は4回トグルします。

なぜこれが起こるのですか？コードを調整して、説明したとおりに動作させるにはどうすればよいですか?

4

2 に答える 2

2

作成した要素のみにイベント ハンドラーを追加します。

$(document).ready(function(){

  $('#add').click(function(){

    var dot = $('<div>').addClass('dot').html('&#x2713;');
    var box = $('<div>').addClass('box').append(dot);

    $('#list-area').append($('<div>').addClass('list-item').append(box));

    box.click(function(){
      dot.toggle(200);
    });

  });

});
于 2013-10-29T02:17:01.910 に答える
0

また、jQuery.on()を確認することもできます

$(document).ready(function () {
    $(document).on('click', '.box', function () {
        $(this).children('.dot').toggle(200);
    });
    $('#add').click(function () {
        $('#list-area').append("<div class='list-item'><div class='box'><div class='dot'></div></div></div>");
    });
});
于 2013-10-29T02:52:44.857 に答える