Javascript jQuery与++；再次使用函数后相乘

例如，我创建了一个名为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();

功能测试（）{
var i=0；
$（'.container'）。单击（函数（）{
$（此）。附加（“”）；
$（'.element'）。单击（函数（）{
如果（i>=10）{
$（'this'）.remove（）；
}否则{
i++；
}
});
});
};
test（）；

当我单击类

.container

时，一个div会附加类名

.element

。当我点击这个div时，var

I

上升，直到达到10。然后删除名为

.element

的div

---

问题是，当我再次单击

.container

时，在删除

.element

后，

I

变量的行为就像它被单击了两次一样。在那之后，等等。如何抵消此影响？

您需要使用

.on（）

$（'.container'）。单击（函数（）{
$（此）。附加（“”）；
});
$（'body'）。在（'click'，'element'，function（）上{
如果（i>=10）{
$（this.remove（）；
}否则{
i++；
}
});

---

还要删除.container div中的.element div事件处理程序另一种方法是像这样绑定元素

还可以使用on/bind方法将事件附加到动态元素

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

或

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

---

您可以为

.element

定义

单击事件，如下所示


var i=0；
功能测试（）{
$（'.container'）。单击（函数（）{
$（此）。附加（“”）；
});
};
test（）；
$（'body'）。在（'click'，'element'，function（）上{
如果（i>=10）{
$（'this'）.remove（）；
}否则{
i++；
}
});

点击我！
您的代码显示的是$（'element'）而不是$（'element'）噢，哎呀。这是一个例子，但无论如何看起来都应该很好：如果你能分享你的JSFIDLE，那就太好了。好吧，我为一家我正在实习的公司做这个。我想我不允许分享实际的代码，不要嵌入点击处理程序。那肯定会有麻烦。
i
没有定义：）谢谢！它工作得很好！一旦超过时间限制，我会将答案标记为“已接受”，但
var I=0
是唯一缺少的一行。@LinkinTED添加：）
$(document).bind('click','.element',function(){
       if (i >= 10){
          $(this).remove();
       } else {
          i++;
       }
    });