jquery-ui - 无法从 JQuery.live() 移动到 JQuery.on()

Question

我正在通过 $.get() 将一些 html 加载到 Jquery-dialog-popup 中。

点击新插入的 html 中的链接后，应触发一些功能。

这适用于 live()，但不适用于 on()。

这有效:

$(".remove").live("click", function () {
  // enter ok
}

这不会:

$("div").on("click", ".remove", function () {
// or $("#delete").on("click", ".remove", function () {
// or $(".remove").on("click", function () {

      // never enters...
});  

html:

<div id="delete">
  <a class="remove" href="#">link</a>
</div>

如果我直接从主模板调用 on() 函数，而无需先通过 $.get 将内容加载到对话框窗口中，则 on() 函数可以工作。

Answer 1

要预先绑定(bind)动态内容的事件，必须将它们绑定(bind)到预先存在的元素。

所以，如果<div id="delete">是动态内容的一部分，那么您不应该使用它来绑定(bind)事件。但是，您可以绑定(bind)到动态内容加载到的容器。

因此，如果生成的 HTML 是:

<div id="contents">
  <!-- start template -->

  <div id="delete">
    <a class="remove" href="#">link</a>
  </div>

  <!-- end template -->
</div>

然后，您的 JavaScript 可以是:

$('#contents').on('click', 'div a.remove', function () {
  // ...
});

.live() 使用document为此——一个元素在重新加载或重定向之前一直存在——使以下几行等效:

$("a.remove").live("click", function () { /* ... */ });
$(document).on("click", "a.remove", function () { /* ... */ });