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

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

Answer 1

这是一个名为event delegation的案例。在这里，您无法将直接事件绑定到动态创建的元素。试试如下：

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

Answer 2

你几乎就在那里，你必须使用on但不同的形式。您正在使用直接事件，但您需要使用委派事件

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

有关详细信息，请参阅Direct and delegated events

部分

Answer 3

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

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

Answer 4

使用.on()

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

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

更好地使用

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

语法

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

Answer 5

使用事件委托：

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

有关事件委派如何工作的简明扼要解释，请参阅此问题：

Direct vs. Delegated - jQuery .on()

jquery的mouseover函数不能动态创建div

5 个答案: