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

Question

我正在使用jQuery管理我正在编码的应用程序的评论上的"编辑"按钮.在我document.ready,我有:

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

我也使用jQuery来显示新发布的评论而不刷新页面.在相关$.ajax()函数中,我使用a将新注释写入DOM $.before(data).问题是,.edit-button内部data没有上述内容$.click()适用于他们,因为这种情况发生在document.ready.所以我点击它们,没有任何反应.

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

所以,我怎样才能重新申请$.click()从s 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()是最好的选择.更多信息.

但是关于.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升级后删除了更新