1

我正在使用 jQuery 的.on()事件处理程序，它仅在我使用$(document).

这有效：

$(function() {
    $(document).on("click", ".search .remove", function(e) {
        console.log("clicked");
    });
});

这不起作用：

$(function() {
    $(".search .remove").on("click", function(e) {
        console.log("clicked");
    });
});

第二个没有任何反应......没有错误或任何东西。它只是不火。

4

3 回答 3

3

您正在使用 .on 的两种不同语法，它们有两种截然不同的结果。

你的第一个是：

$(context).on("event","targetselector",handler)

这将事件绑定到上下文，并且任何类型的事件event到达context具有e.target可以选择的 的targetselector将触发处理程序e.target作为上下文。这通常称为事件委托。

你的第二种语法是

$(targetselector).on("event",handler)

在这种情况下，事件直接绑定到页面上当前匹配的targetselector元素，而不是未来的元素。这与旧的基本相同.bind。

于 2012-10-17T14:41:35.417 回答
2

您的第二个示例不起作用，因为您的元素是动态创建的。当使用.on()动态插入的元素时，您必须通过一个非动态插入的元素来绑定它，即在加载时存在于页面上的元素。

您可以继续document用作祖先元素，但就性能而言，您可能希望在 DOM 中找到更接近".search .remove".

来自jQuery文档：.on()

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

于 2012-10-17T14:39:33.647 回答
1

您的第一个方法on()与不推荐使用的方法等效live()。页面加载完成后，您的元素可能会动态插入。

您可以像下面这样重写您的代码，它应该可以工作：

$(function() {
    $(".search").on("click", ".remove", function(e) {
        console.log("clicked");
    });
});
于 2012-10-17T14:41:29.813 回答