Question

我目前正在根据一些网络电话动态填充列表。当这些调用返回时，我使用HTML模板根据调用响应将另一个项添加到列表中。我也尝试使用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>';

所有元素都被适当替换。

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

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

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

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

谢谢！

Answer 1

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

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

示例1：

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

示例2：

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

动态项和jQuery事件绑定

1 个答案: