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事件处理程序

Answer 2

另一种方法是绑定像这样的元素

您还可以使用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++; } });

Answer 3

您可以为.element定义var i = 0; function test() { $('.container').click(function() { $(this).append('<div class="element"></div>'); }); }; test(); $('body').on('click', '.element', function() { if (i >= 10) { $('this').remove(); } else { i++; } });事件，如下所示。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  Click Me!
</div>

＆＃13;

$sender = $this->get('fos_message.sender');
$sender->send($message);

＆＃13;

再次使用函数后jQuery添加++乘以

3 个答案: