5

我正在努力弄清楚为什么 mouseover 事件不能与 .on 处理程序一起使用，该处理程序是从 ajax 动态创建的元素。似乎唯一可行的是带有 .live 的代码，但我知道它已被弃用。

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

但是，当我尝试使用 .on 时，它不起作用 - 无论我尝试什么变体（document.ready、.mouseover 等）

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

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

4

1 回答 1

21

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

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

或者在你的情况下：

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

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

还要确保使用DOM 就绪功能

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

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

});
于 2012-07-02T06:10:59.737 回答