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>