jquery on event 为动态生成的孩子的动态生成的孩子

Question

我有一个动态添加的 div，我希望为已动态添加到另一个标签中的图像设置一个 mouseenter 事件。被添加到的 div 看起来像这样：

<div class="chat_box">

</div>

添加内容后如下所示：

<div class="chat_box">
  <p class="chat">text here <img class="emote" src="emote.png"> more text</p>
</div>

我想为表情类的图像设置一个 mouseenter 事件，但我无法让它工作。

我尝试了以下方法：

$('.chat_box').on('mouseenter', '.chat', function(){
  alert();
});

它可以工作，但如果我尝试使用子选择器

$('.chat_box').on('mouseenter', '.chat > .emote', function(){
  alert();
});

和

$('.chat_box').on('mouseenter', '.chat > img', function(){
  alert();
});

它不起作用。

Answer 1

这是以前由 .live() 提供的，但该函数已合并到 .on() ...它创建了一个事件观察器。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="chat_box"></div>

<button>Add</button>

<script>
$('button').click(function(){
    $('<div class="chat"><img width=10 height=10 class="emote"></div>').appendTo('.chat_box');
});
$('.chat_box').on('mouseenter', 'img.emote', function(){ alert('test'); });           
</script>

只需定位父对象并让它监视预期的子对象。