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>");
    });
});

如何让toggle（）方法停止重复？ jQuery的

2 个答案: