Javascript jquery的mouseover函数在动态创建的div上不起作用

我正在尝试使用jquery向动态创建的元素添加mouseover函数

$('#schools').append(
    '<div class="mediumListIconTextItem" onclick="javascript:showSchoolReport(\'' + $.trim(this.id) + '\',\'' + $.trim(this.companyID) + '\',\'' + $.trim(this.companyCode) + '\',\'' + $.trim(this.companyName) + '\');" style="padding-left: 30px;margin: 5px;">' + '<div class="icon-newspaper mediumListIconTextItem-Image"></div>' + '<div class="mediumListIconTextItem-Detail">' + '<h6 id="header" style="max-width:100px; overflow:hidden;">' + this.name + ' - ' + this.companyName + '</h6></div></div>');

---

上述鼠标悬停功能均不起作用。我的代码有什么问题。建议一个解决方案

你就快到了，你必须在上使用，但形式不同。您正在使用直接事件，但需要使用委派事件

$('#schools').on("mouseover", ".mediumListIconTextItem", function() { .. }

有关更多详细信息，请查看“用于动态添加的元素”部分，如

使用

由于元素是动态添加的，您无法将事件直接绑定到它们。因此您必须使用

更好地利用

$("#schools").on("mouseover", ".mediumListIconTextItem", function() { .code here. }

语法

$( elements ).on( events, selector, data, handler );

使用事件委派：

$('#schools').on('mouseover', '.mediumListIconTextItem', function(){ ... })

有关事件委派工作原理的简明说明，请参见以下问题：

这种情况称为事件委派。在这里，您不能将直接事件绑定到动态创建的元素。请按以下方式尝试此操作：

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

---

这个问题每天都会被问到。可能是重复的。我可以获取发起mouseover事件的元素的id吗？是的，而不是$document。您可以使用$'schools'更改此设置。我可以获取发起mouseover事件的元素的id吗

$( elements ).on( events, selector, data, handler );

$('#schools').on('mouseover', '.mediumListIconTextItem', function(){ ... })

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