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 () { /* ... */ });

Answer 2

我看不到整个代码，但我敢打赌你没有把

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

      // never enters...
}

部分ONCE新代码已插入DOM。

您需要将事件侦听器附加到创建的新元素。实时工作，因为它适用于现有和未来的元素。

修改

如果您希望click处理程序适用于动态加载的元素，那么您需要在父对象上设置事件处理程序（不会动态加载）并为其提供一个与您的动态对象匹配的选择器这样：

$('#parent').on("click", ".remove", function() {});

无法从JQuery.live（）移动到JQuery.on（）

2 个答案: