Question

我使用的是jQuery的.on()事件处理程序，它仅在我使用$(document)时才有效。

这有效：

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

这不起作用：

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

第二个没有任何事情......没有错误或任何事情。它只是没有发射。

Answer 1

您使用两种不同的.on语法，它们有两种非常不同的结果。

你的第一个是：

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

这会将事件绑定到上下文，任何event类型的事件都会触发context e.target，targetselector可以使用e.target选择$(targetselector).on("event",handler)处理程序targetselector作为上下文。这通常称为事件委托。

您的第二种语法是

.bind

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

Answer 2

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

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

来自.on()上的jQuery docs：

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

Answer 3

您的第一种方法是已弃用的方法on()的等效live()。可能在页面加载完成后动态插入元素。

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

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

jQuery on（）事件只与$（文档）一起使用

3 个答案: