javascript - 再次使用函数后，jQuery 添加 with++ 乘以

Question

我创建了一个名为 test 的函数(例如)，它的工作原理如下:

function test(){
    var i = 0;

    $('.container').click(function(){
        $(this).append('<div class="element"></div>');
        $('.element').click(function(){
            if (i >= 10){
                $('this').remove();
            } else {
                i++;
            }
        });
    });
};
test();

当我单击类 .container 时，一个 div 附加了类名 .element。当我单击此 div 时，var i 上升，直到达到 10。然后删除名为 .element 的 div。

问题是，当我再次单击 .container 时，在 .element 被删除后，i 变量的行为就像它被单击一样两次。三次之后，依此类推。我该如何应对？

Answer 1

您需要使用 .on() 将事件附加到动态添加的元素上

$('.container').click(function(){
        $(this).append('<div class="element"></div>');

    });

 $('body').on('click','.element',function(){
   if (i >= 10){
      $(this).remove();
   } else {
         i++;
   }
});

同时删除 .container div 中的 .element div 事件处理程序