小编典典

事件不适用于动态创建的元素

ajax

我正在竭尽全力试图找出为什么鼠标悬停事件无法与具有从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');
});

事件处理程序位于代码的底部,因此它们最后执行。有人知道我在做什么错吗?


阅读 265

收藏
2020-07-26

共1个答案

小编典典

使用.on与新生成的元素 动态事件代表团
http://api.jquery.com/on/ -在你的主要选择是存在的 静态父

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

或者您的情况:

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

委派事件的优势在于,它们可以处理来自后代元素的事件,这些事件以后会添加到文档中。通过选择保证在附加委托事件处理程序时会出现的元素,您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如,如果事件处理程序想要监视文档中的所有冒泡事件,则此元素可以是Model-
View-
Controller设计中视图的容器元素,也可以是文档。在加载任何其他HTML之前,document元素在文档的开头可用,因此可以安全地在其中附加事件,而无需等待文档准备就绪。

还要确保使用 DOM ready 函数

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

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

});
2020-07-26