Question

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

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

});

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

我的问题是这个mouseenter绑定器不会触发创建的新class1元素。如何才能将此mouseenter触发器应用于新创建的元素？

由于

Answer 1

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

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

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

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

版本的功能＆lt;用于实现这一点的1.7是'live（）'，这在1.7版本中已被弃用，有利于升级的'on（）'方法。有关详细信息，请参阅此处的旧文档：http://api.jquery.com/live/

Answer 2

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

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

这与旧的live（）事件的工作方式更相似，因为父级也会在添加到body的任何新元素上查找事件。

编辑：不要忘记在该函数内部使用$（this）而不是强制jQuery进行第二次DOM查找:)抱歉，我在那个上做了nooced

Answer 3

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

基本上，你在父元素上附加委托并听取对孩子的行为。

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

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

Answer 4

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

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

使用$('#container').on('mouseenter', '.class1', addDiv);

时

修正了fiddle和代码。