将 jQuery .click() 应用于 Ajax 生成的 HTML

Question

我正在使用jQuery来管理我正在编码的应用程序的评论上的"编辑"按钮。在我的document.ready中，我有：

$('.edit-button').click(function(){
// Code to trigger the editing interface for parent comment
});

我还使用 jQuery 在不刷新页面的情况下显示新发布的评论。在相关的$.ajax()函数中，我使用$.before(data)将新注释写入 DOM。问题是，data内的.edit-button没有应用上述$.click()，因为这发生在document.ready中。所以我点击它们，什么也没发生。

我已经尝试了（非常丑陋的）解决方案，让 Ajax 函数重新包含我调用document.ready的.js文件。这有效，除了它将.click()重新应用于每个.edit-button，因此他们打开编辑界面两次（甚至三次）。

那么，我怎样才能重新应用document.ready的$.click()？最好不必将我的document.ready函数复制粘贴到另一个javascript文件中，以防我以后修改它。

Answer 1

根据你的jQuery版本，有以下解决方案：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

显然，.on()最后一个是最好的选择。更多信息。

但关于.bind()：

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素必须在调用.bind()时存在。参考

对于您的问题答案是这样的：

$('.edit-button').on("click",function(){  })

或

$(document).on("click", ".edit-button", function(){  }); 

注：不再建议使用 .live() 方法，因为更高版本的 jQuery 提供了更好的方法，没有其缺点。更多信息

更新 .live() jQuery 1.9 升级后删除

Answer 2

试试这个

$('body').on("click", ".edit-button", function(){
})

您也许可以用更有针对性的内容更改身体选择器。

Answer 3

由于您使用的是 AJAX，因此需要使用 "live（）" API。

$('.edit-button').live("click", function(){
// Code to trigger the editing interface for parent comment
});

Answer 4

使用

$('.edit-button').bind('click', function() {
// Code to trigger the editing interface for parent comment
});

或者在评论发布后的ajax成功函数中，您可以添加如下内容：

$.ajax({
    url: "some url",
    // ...
    success: function (data) {
        //comment posted successfully
        $('.edit-button').unbind("click");
        $('.edit-button').bind("click", editButtonClickHandler);
});
function editButtonClickHandler () {
    //.. handle click
}