jQuery向动态创建的元素添加点击事件

Question

我需要在DOM加载后动态创建的列表项中添加点击事件。我正在使用;

$("#ListDiv li").live("click",function(event){
  do something......
 });

然而，当该元素在页面上加载后，我点击它却没有反应。在Firefox中可以正常工作，但在IE8中不行。我尝试使用jQuery Livequery和Delegate，但都没有效果。我也尝试使用IE8开发者工具进行调试，但该方法从未被触发。

- cdugga

Answer 1

使用.delegate或.live，并确保在DOM准备就绪后绑定一次：

$(document).ready(function () {
    $("#ListDiv").delegate("li", "click", function (event) {
        // do something
    });
});

编辑:

上面的解决方案虽然仍然完全有效，但现在已经过时。jQuery自此引入了.on()方法：

从jQuery 1.7开始，.on()方法提供了所有所需的功能来附加事件处理程序。

实现与上面发布的.delegate解决方案非常相似，但请注意参数的顺序已更改:

$(document).ready(function () {
    $("#ListDiv").on("click", "li", function (event) {
        // do something
    });
});

- karim79

---

@cliveholloway - 谢谢您指出这一点。我已经更新了答案 :) 再次感谢！ - karim79

Answer 2

将您的代码放在 `document.ready` 中运行。

 $(document).ready(function() {
       $("#ListDiv li").live("click",function(event){
        do something......
       });
     });

- Vivek