javascript - 如何让 toggle() 方法停止重复？jQuery

Question

$(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 次，依此类推。

为什么会出现这种情况？如何调整代码以使其按照我解释的方式运行？

Answer 1

仅将事件处理程序添加到您创建的那个元素：

$(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);
    });

  });

});

Answer 2

你也可以检查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>");
    });
});