动态产生的孩子的动态生成的孩子的活动

Question

i有一个DIV，该DIV被动态添加到，我想为图像中的鼠标事件进行动态添加到另一个标签中的图像。事先将其添加到这样的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>

我想为图像带有ex emote的鼠标事件，但我无法正常工作。

我尝试了以下内容：

$('.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>

只是针对父对象，并注意预期的孩子。