在DOM元素被覆盖之后，jQuery事件不会触发

Question

首先，我使用innerHTML动态地将表写入div，然后我尝试在用户悬停表格单元格时运行jQuery函数。 jQuery函数触发HTML中存在的表，但是一旦我用新表覆盖innerHTML，jQuery就不再在悬停时运行该函数了。

<div id="replaceThis">
    <table id="myTable">
        <tr><td class="myCell">Help</td></tr>
    </table>
</div>

然后我使用.on（＆＃39; mousenter＆＃39;）来运行一个函数

$('#myTable tr td.myCell').on('mouseenter',function(){alert('omg help'); }

这一切都正常，直到我用一个新表替换div的innerHTML，这个表通过一些数据循环创建。然后jQuery不会在mouseenter上触发该函数，即使id和类是相同的。

Answer 1

使用委派活动。当您替换正文时，它会生成新的HTML元素，这些元素不再附加事件处理程序。

jQuery在on函数上提供了selector参数的委托处理程序功能。

例如：

$('body').on('mouseenter', '#myTable tr td.myCell', function(){alert('omg help'); }

阅读文档中的直接和委派事件段落：http://api.jquery.com/on/

Answer 2

在覆盖DOM元素之后，事件不再附加到DOM元素。使用Delegated事件可以解决您的问题。

$('#myTable tr td.myCell').on('mouseenter',function(){alert('omg help'); }

$('#replaceThis').on('mouseenter', "#myTable tr td.myCell", function () {
    alert('omg help');
});