动态项目和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事件绑定

回答

相关问题