覆盖DOM元素后jQuery事件未触发答案

【问题标题】：jQuery event not firing on after DOM element is overwritten覆盖DOM元素后jQuery事件未触发
【发布时间】：2014-06-24 23:19:34
【问题描述】：

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

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

然后我使用 .on('mousenter') 来运行一个函数

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

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

【问题讨论】：

【解决方案1】：

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

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

例如：

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

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

【讨论】：

【解决方案2】：

覆盖 DOM 元素后，事件不再附加到 DOM 元素。使用委托事件将解决您的问题。

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

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

【讨论】：