動態項目和jQuery事件綁定

我目前正在填充列表動態地根據一些網絡電話。當這些調用返回時，我使用HTML模板根據調用響應將其他項添加到列表中。我也試圖使用jQuery將一些事件附加到這些對象上，但是當我生成這些項目時，似乎只有最後生成的項目才具有適當的事件觸發。動態項目和jQuery事件綁定

所以這裏是代碼：

的JavaScript生成的HTML字符串和它添加到列表：

List.innerHTML += html;

使用moustache.js生成的HTML和正確呈現，我設置了在添加它之前在模板中添加id。

模板具有這種形式：

var template = '<li style="width:400px; height:100px" id="{{id}}" ><img src="{{source}}" style="float:left"/>{{title}} <button id="{{id}}button">Delete</button></li>';

，所有的元素都適當地進行更換。

然後我試着點擊事件附加到按鈕和雙擊事件的整個列表對象：

$('#' +id +'button').bind('click', function() { 
     //SOME STUFF GOES HERE 
    }); 

$('#' +id +'button').bind('dblclick', function() { 
    //MORE STUFF GOES HERE 
    });

林不知道爲什麼事件難道不附加到每個對象，我失去的東西嗎？

謝謝！

來源

2012-07-06 Ty Rozak

是T中的元素當你嘗試綁定事件時他DOM？ – sachleen 2012-07-06 18:55:02

你是否在循環中添加了它們或之後的那些函數？顯示更多代碼。 – 2012-07-06 18:55:31

我在創建它們的循環內部進行了綁定，但是在將HTML添加到列表後，事件被註冊。 – 2012-07-06 18:57:22

的DOM可能沒有被及時更新瀏覽器添加點擊處理程序。你有幾個選擇：

使用委託將它們添加到DOM

例1結合之前（使用。對）

附上事件：

$('body').on('click', '#' +id +'button', function() { /* foo */ });

例2 ：

$('#' +id +'button', myHtml).on('click', function() { /* foo */ }); 
List.append(myHtml);

來源

2012-07-06 18:56:16

我也會使用代表團。如果在調用點擊處理程序時需要任何特定數據，則應使用data- *屬性。 – boulaycote 2012-07-06 19:00:55

我確實需要這些調用的具體數據，我該怎麼做？ – 2012-07-06 19:03:25

+1 - 就我個人而言，我會選擇編號1（使用.on）。 – 2012-07-06 19:04:27

動態項目和jQuery事件綁定

回答

相關問題