動態項目和jQuery事件綁定

Question

我目前正在根據一些網絡電話動態填充列表。 這些呼叫返回時，我將使用HTML模板根據呼叫響應將另一個項目添加到列表中。 我還嘗試使用jQuery將一些事件附加到這些對象，但是當我生成項目時，似乎只有最后生成的項目才觸發適當的事件。

所以這是代碼：

javascript生成html字符串並將其添加到列表中：

List.innerHTML += html;

該html使用moustache.js生成並正確呈現，我在添加模板之前在模板中設置了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>';

適當替換所有元素的位置。

然后，我嘗試將click事件附加到按鈕，並將doubleclick事件附加到整個列表對象：

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

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

我不確定為什么事件不會附加到每個對象上，我是否錯過了某些東西？

謝謝！

Answer 1

添加點擊處理程序時，DOM可能尚未在瀏覽器上更新。 您有兩種選擇：

1. 使用委托綁定（使用.on）
2. 在將事件添加到DOM之前附加事件

范例1：

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

范例2：

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