javascript - 使 jQuery mouseenter 应用于新的新元素

Question

$('.class1').mouseenter(function() {

   $('<div class="class1"> </div>').appendTo('body');

});

以上是伪代码，它显示了我正在尝试做的事情。我将鼠标悬停在 class1 的一个元素上，然后创建了 class1 的另一个元素。

我的问题是这个mouseenter活页夹不会为新创建的 class1 元素触发。我怎样才能让这个mouseenter触发器也适用于新创建的元素？

谢谢

score 4 · Accepted Answer

从 jQuery 1.7 开始，您可以使用 'on' 绑定事件，以便将事件委托给与指定选择器匹配的包含元素。

因此，在您的情况下，将事件绑定到正文，并指定class1选择器，如下所示：

$('body').on('mouseenter' ,'.class1', function(e) {
    $('<div class="class1"></div>').appendTo('body');
});

有关更多信息，请参阅此处的文档：http: //api.jquery.com/on/

< 1.7 版本用于实现此目的的函数是 'live()'，这在 1.7 版本中已弃用，取而代之的是升级的 'on()' 方法。有关更多信息，请参阅此处的旧文档：http: //api.jquery.com/live/

score 2 · Accepted Answer

更好的解决方案是在父元素甚至正文上使用 .on() 。

$('body').on('mouseenter', '.class1', function(){
     $(this).append('<div class="class1"> </div>');
});

这与旧的 live() 事件更相似，因为父级也会在添加到 body 的任何新元素上查找事件。

编辑：不要忘记在该函数中使用 $(this) 而不是强制 jQuery 进行第二次 DOM 查找 :) 抱歉，我没看懂那个

score 0 · Accepted Answer

您可以尝试使用delegateoron方法（取决于您使用的 jquery 版本）。

基本上，您将委托附加到父元素并听取子元素的操作。

$('body').on('mouseenter', '.class1', function() {});

这仅在body元素上注册事件处理程序。

score 0 · Accepted Answer

$('body').mouseenter(addDiv);

function addDiv() {
    $('<div class="class1"> </div>').appendTo('body');
}

新添加的div在使用时不触发该功能$('#container').on('mouseenter', '.class1', addDiv);

修复了小提琴和代码。

4 回答 4