Question

我正在试着弄清楚为什么mouseover事件不能与带有来自ajax的动态创建元素的.on处理程序一起工作。唯一似乎有效的是带有.live的代码，但我知道它已被弃用。

$(".dropdown ul li").live("mouseover", function() {
alert('mouseover works');
});

然而，当我尝试使用.on时，无论我尝试做什么变化（document.ready，.mouseover等等）都无法使用。

$(".dropdown ul li").on("mouseover", function() {
alert('mouseover works');
});

事件处理程序位于代码的底部，因此它们最后执行。任何人都知道我做错了什么？

Answer 1

使用.on为新生成的元素动态事件委派 http://api.jquery.com/on/ - 您的主选择器是现有的静态父：

$(".static-parent").on("event1 event2", ".dynamic-child", function() {

或在你的情况下：

$(".dropdown").on("mouseover", "li", function() {
   alert('mouseover works!!!!!!!!!');
});

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

还要确保使用 DOM ready 功能

jQuery(function($) { // DOM is now ready and $ alias secured

    $(".dropdown").on("mouseover", "li", function() {
       alert('mouseover works!!!!!!!!!');
    });

});

事件不在动态创建的元素上

1 个答案: