javascript - jquery的鼠标悬停功能不适用于动态创建的div

Question

我正在尝试使用 jquery 向动态创建的元素添加鼠标悬停功能

$('#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>');

鼠标悬停效果代码

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

上述鼠标悬停功能均无效。我的代码有什么问题。提出解决方案

score 2 · Accepted Answer

这种情况称为event delegation。在这里，您不能将直接事件绑定到动态创建的元素。试试这个如下：

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

score 0 · Accepted Answer

你快到了，你必须使用on但以不同的形式。您正在使用直接事件，但您需要使用委托事件

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

有关更多详细信息，请查看直接和委托事件部分

score 0 · Accepted Answer

将on()用于动态添加的元素，例如，

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

score 0 · Accepted Answer

使用.on()

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

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

更好地使用

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

句法

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

score 0 · Accepted Answer

使用事件委托：

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

有关事件委托如何工作的清晰简短说明，请参阅此问题：

直接与委托 - jQuery .on()

javascript - jquery的鼠标悬停功能不适用于动态创建的div

5 回答 5

Related

Reference