无法从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将内容加载到对话窗口中.

Answer 1

要预先绑定动态内容的事件,必须将它们绑定到预先存在的元素.

因此,如果它<div id="delete">是动态内容的一部分,那么您不应该使用它来绑定事件.但是,您可以绑定到加载动态内容的容器.

因此,如果生成的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 () { /* ... */ });