如何綁定點擊使用AJAX加載的新數據？ - JQuery的

Question

我有一個「顯示更多」它加載更多Ajax請求一堆鏈接：

<a href="#" class="item">abc</a> 
<a href="#" class="item">abc</a> 
<a href="#" class="item">abc</a> 

我有一個綁定功能這一點，做一些事情：

$('.item').click(function(e) { 
    // some stuff 
}); 

問題是， 當我使用Ajax加載更多這些鏈接時，點擊它們不會去這個功能！

我怎麼能「重新綁定」所有的鏈接，使新的工作以及？

Answer 1

您可以使用live()或delegate()綁定處理程序，如果你使用jQuery < 1.7

$('.item').live('click', function(e) { 
    // some stuff 
}); 

$('body')delegate('.item', 'click', function(){ 

}); 

，如果你使用jQuery> 1.7，你應該使用on()，但你必須在事件處理程序附加到元件以您委託在附加處理程序時，事件處理和該元素必須存在於DOM中。
所以，如果你有一個鏈接容器，你應該使用它，否則你可以使用body元素。

<div id='container'> 
<a href="#" class="item">abc</a> 
<a href="#" class="item">abc</a> 
<a href="#" class="item">abc</a> 
</div> 

$("#container").on("click",".item", function(event){ 

}); 

，或者如果沒有容器（它有一個更大的開銷）

$("body").on("click",".item", function(event){ 

}); 

Answer 2

您可以使用on()，這將觸發對新創建的對象：

$('body').on('click', '.item' function(e) { 
    // some stuff 
}); 

第一位 - $('body')應該是在運行此函數時位於DOM中的.item的父項。