Ajax 事件在动态创建的元素上不起作用

我正在绞尽脑汁试图弄明白为什么mouseover事件不能与.on处理程序一起工作，该处理程序具有从ajax动态创建的元素。唯一有效的方法是使用.live编写代码，但我知道它已被弃用

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

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

---

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

使用

.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!!!!!!!!!');
    });

});

---

警惕（‘不，不是）；：（（真的希望如此！没有任何事件处理程序（.click、.on、.delegate）似乎在工作，除了.live！不确定发生了什么on@7ch5您使用的是什么jQuery版本？仍在试图找出我做错了什么。您的答案布局得如此漂亮，令人遗憾的是它仍然不起作用！：（如果有区别的话，代码是一个搜索栏，我在其中键入内容，查询是回显的列表项。每隔一个事件处理程序（例如用于实际的搜索框（keyup、blur等））除了这个动态创建的元素外，其他元素都可以工作。这个演示与这个问题有什么关系？应该会出现一个列表项的ul，但我没有意识到我无法通过JSFIDLE上的另一个站点访问数据，所以它没有按预期出现。。（如果您单击链接，您将看到动态创建的ul&list项目。非常感谢您的尝试，但我想我们只需要在早上睡一觉，看看是否能解决它。您显示的

.on（）

语法与

.live（）

或

.delegate（）不等效。）

。jQuery告诉您如何转换为使用

.on（）

或

.delegate（）

。

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

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

});