JQuery ON无法正常工作

Question

我几乎花了4个多小时才弄清楚我在做什么是错的。请帮助我解释为什么这样做：

    $("div.spinedit i.modify-counter").on('click', function() {
        alert("here");
    });

而这不是：

    $(document).on("click", "div.spinedit i.modify-counter", function(e) {
        alert("here");
    });

第一个代码只适用于与页面一起生成的项目，我需要的是它也可以处理AJAX生成的元素。

Answer 1

稍后可能会将后代元素添加到文档中。 通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

以下代码应该有效。

$(document).on("click", "i.modify-counter", function(e) {
    alert("here");
});

OR

$("div.spinedit").on("click", "i.modify-counter", function(e) {
    alert("here");
});

Read more information here.

Answer 2

你试过吗

$("div.spinedit").on('click',  "i.modify-counter", function() {
        alert("here");
});

或

$(document).on('click',  "i.modify-counter", function() {
            alert("here");
});

Answer 3

首先，抓取静态的父元素（我猜这是.spinedit），然后将click事件分配给其中的每个元素.modify-counter。

像这样：

$('div.spinedit').on('click', 'i.modify-counter', function(event) {
    alert("Hello, I'm working!");
});

Answer 4

用你的第一个例子......

$("div.spinedit i.modify-counter").on('click', function() {
    alert("here");
});

您正在加载页面时找到所有元素，并将事件处理程序绑定到每个元素。如果某个时间点没有DOM元素，那么就不会触发事件处理程序......如果处理器没有设置它，它怎么能触发处理程序？

$(document).on("click", "div.spinedit i.modify-counter", function(e) {
    alert("here");
});

在这里，您将在页面加载时找到该文档并将单击处理程序绑定到该文档。您不将点击处理程序绑定到i.modify-counter元素。但是，第二个参数（例如"div.spinedit i.modify-counter"）向处理程序指示它应该仅在

时触发

1. 单击的项目是文档的子元素，
2. 单击的项目与您传入的选择器匹配。

这是一个微妙但大的差异。因为处理程序在document上，所以在以后添加新的AJAX元素时不需要重新绑定click处理程序...因为处理程序不在这些元素上。

每次点击document下的任何内容时，处理程序都会评估它是否与该选择器匹配。如果是，则触发该事件。

Answer 5

'on'方法不适用于动态生成的内容。相反 - 您需要将'on'方法附加到静态父级，并将您的actuall动态插入标记作为第二个参数传递。