无法在附加的div上检测mouseenter

Question

我的html有一个这样的文件：

<div id="append">
     <div class="sample"> Sample Text 1 </div>
</div>

在我的jquery文件中，这就是我要附加其余部分的内容，

$.each([ 2,3,4,5,6,7,8,9,10 ], function( index, value ) {
      $('#append').append("<div class="sample"> Sample Text "+ value.toString() + " </div>");
});

我遇到的问题是附加的分区（示例文本2及更多）无法检测鼠标输入事件。我通过这样做测试了它：

$("div.sample").mouseenter(function(){
    alert("Mouse Enter Event Detected");
});

我只在悬停在第一个div.sample上时收到提醒。附加的分区似乎没有检测到它。

如何检测附加分区的鼠标悬停事件？

Answer 1

您可以使用以下脚本

$(document).on("mouseenter", "div.sample", function(){
    alert("Mouse Enter Event Detected");
});