Javascript 动态项和jQuery事件绑定

我目前正在根据一些web调用动态填充列表。当这些调用返回时，我使用HTML模板根据调用响应将另一项添加到列表中。我还试图使用jQuery将一些事件附加到这些对象上，但是当我生成这些项时，似乎只有最后生成的项触发了相应的事件

下面是代码：

javascript生成html字符串并将其添加到列表中：

List.innerHTML += html;

html是使用moustach.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>';

我不知道为什么事件不会附加到每个对象，我是否遗漏了什么

---

谢谢

添加单击处理程序时，浏览器上的DOM可能尚未更新。您有两个选择：

使用委托绑定（使用.on）

在将事件添加到DOM之前附加事件

例1：

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

例2：

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

---

添加单击处理程序时，浏览器上的DOM可能尚未更新。您有两个选择：

使用委托绑定（使用.on）

在将事件添加到DOM之前附加事件

例1：

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

例2：

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

---

当您尝试绑定事件时，DOM中的元素是否存在？您是在添加它们的循环中绑定这些函数还是在它之后绑定这些函数？显示更多代码。Im绑定在创建它们的循环中，但是在我将HTML添加到列表中之后，事件被注册。在我看来，列表的选择器是错误的。它不应该是

$（“#”+id）

？这也是，但另一个事件仍然没有添加。谢谢当您尝试绑定事件时，DOM中的元素是否存在？您是在添加它们的循环中绑定这些函数还是在它之后绑定这些函数？显示更多代码。Im绑定在创建它们的循环中，但是在我将HTML添加到列表中之后，事件被注册。在我看来，列表的选择器是错误的。它不应该是

$（“#”+id）

？这也是，但另一个事件仍然没有添加。谢谢我还将使用授权。如果调用单击处理程序时需要任何特定数据，则应使用data-*属性。我确实需要这些调用的特定数据，我将如何做到这一点？将数据属性添加到模板中。假设在处理程序中需要一个“name”属性，则在模板中添加一个

dataname={{{name}}

。然后在单击处理程序中，使用

var name=$（this.data（“name”）

获取该数据。我还将使用委托。如果调用单击处理程序时需要任何特定数据，则应使用data-*属性。我确实需要这些调用的特定数据，我将如何做到这一点？将数据属性添加到模板中。假设在处理程序中需要一个“name”属性，则在模板中添加一个

dataname={{{name}}

。然后在单击处理程序中，使用

var name=$（this.data（“name”）

获取该数据。