如何在新添加的DOM上進行實時點擊事件

我是live（）用戶，我知道live（）已被棄用。我試圖用bind（）在新增加的dom上運行事件，但事實並非如此。如何在新添加的DOM上進行實時點擊事件

你能告訴我如何正確地做bind（）嗎？還是有任何其他方法來完成這項任務？

這是HTML：

<table> 
    <tr> 
     <td> hi there <span class="click">click me</span></td> 
    <tr> 
    <tr> 
     <td> hi there2 <span class="click">click me</span></td> 
    <tr> 
    <tr class="end"> 
     <td></td> 
    </tr> 
</table> 
<button class="add_new">add new row</button>

這是JS：

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>'; 

$('.add_new').click(function() { 
    $('.end').before(new_row);  
}); 


$('.click').bind('click', function() { 
    alert('clicked'); 
});

如果可能的話，我想用本地jQuery的方法，而不是插件。這是我的jsfiddle http://jsfiddle.net/bondythegreat/z3uXH/

來源

2012-04-10 bondythegreat

你需要使用jQuery的.on()或.delegate()的動態版本。

$('table').on('click', '.click', function() { 
    // your code here 
});

對於使用委派的事件處理動態行爲，其基本思想是，第一選擇（在jQuery對象）必須是安裝了事件處理程序後不動態創建一個靜態的父對象。作爲第二個參數傳遞給.on（）的第二個選擇器是一個選擇器，它與您希望事件處理程序所在的特定項匹配。這些項目可以在安裝事件處理程序後動態創建。

使用.click()或.bind()可以獲取僅處理代碼最初運行時出現的對象的靜態事件處理函數。

爲了使這段代碼更健壯，我建議兩件事。首先，不要使用類似「click」的類名，這很容易與事件混淆。其次，在你的桌子上放一個ID，以便ID可以在第一個選擇器中被引用，而不是非常通用的"table"，這可能意外地在頁面中的其他表上激活。

來源

2012-04-10 06:54:19 jfriend00

感謝jfriend00和所有。這是你添加的非常有用的提示。值得注意的 – bondythegreat 2012-04-10 07:03:44

你需要使用jQuery的on() method

像so：

$('table').on('click', '.click', function() { 
    alert('clicked'); 
});

來源

2012-04-10 06:50:53 neoascetic

從jQuery 1.7+開始，live()被替換爲on()。文檔頁面爲live()有指導如何更新到更新的方法。

在你的情況下，將轉化爲：

$('table').on('click','.click', function() { 
    alert('clicked'); 
});

看到altered & working fiddle

來源

2012-04-10 06:55:51 m90

如何在新添加的DOM上進行實時點擊事件

回答

相關問題