Question

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

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

我也使用jQuery来显示新发布的评论而不刷新页面。在相关的$.ajax()函数中，我使用$.before(data)将新注释写入DOM。问题是，.edit-button中的data没有应用前面提到的$.click()，因为这发生在document.ready中。所以我点击它们，没有任何反应。

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

那么，我如何重新应用$.click()中的document.ready？最好不要将我的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()是最好的选择。 More Information

但关于.bind()：

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

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

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

或

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

注意：不再推荐使用.live()方法，因为更高版本的jQuery提供了更好的方法，没有它的缺点。 More Information

<强>更新在jQuery 1.9升级后删除了.live()

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
}

将jQuery .click（）应用于Ajax生成的HTML

4 个答案: