了解“重新绑定”Ajax 刷新后的 jQuery 链接

Question

我的列表中有一些链接可以触发一些 jQuery 活动：

HTML：

<div id="list">
<a href="#" rel="23" class="edit">Edit:</a> Foo
<a href="#" rel="24" class="edit">Edit:</a> Bar
etc.

查询：

$('.edit').click(function(e) {
    e.preventDefault;

    ...open edit form and save update with $.ajax to server...
    ...with $.ajax retrieve fresh list from database...
    ...use $('#list;).html(fresh list of links)...

});

首先我尝试了以下方法将编辑链接“重新绑定”到一个事件：

$('.edit').on('click', function(...

那没用。在reading this great answer之后，我尝试了：

$(document).on('click', '.edit', function(...

还有宾果游戏！它奏效了。

问题：有人能解释一下两者的区别吗？

谢谢。

Answer 1

.on 将事件处理函数附加到所选元素。在您的情况下，您附加 .on 的 .edit 会在您的 Ajax 刷新时从 DOM 中删除，并且可能已经注入了一组新的 .edit 元素。但是新添加的 .edit 元素没有附加 .on 。另一方面，当您将.on 附加到父/文档级别时，它工作正常。这是因为您附加的父元素仍然/始终存在。

将 .on 附加到父元素而不是文档总是好的 - 在本例中为 #list