0

我目前正在根据一些网络调用动态填充列表。当这些调用返回时，我使用 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>';

所有元素都被适当替换的地方。

然后我尝试将单击事件附加到按钮并将双击事件附加到整个列表对象：

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

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

我不确定为什么事件不会附加到每个对象，我错过了什么吗？

谢谢！

4

1 回答 1

4

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

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

示例 1：

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

示例 2：

$('#' +id +'button', myHtml).on('click', function () { /* foo */ });
List.append(myHtml);
于 2012-07-06T18:56:16.860 回答