jQuery的加入再次

Question

我做一个测试（例如）函数，它的工作原理是这样的：

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

Answer 2

另一种方法是这样的

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

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

OR

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

Answer 3

您可以定义click事件.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++; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    Click Me! 
 
</div>