jquery on动态生成的子动态生成的子事件

Posted 2021-05-06

我有一个动态添加的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();
});

它不起作用。

答案

这是以前由.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>

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