jQuery事件在DOM元素被覆盖后不触发。

Question

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

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

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

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

这一切都很好，直到我用一张新的更大的表格替换了div的innerHTML，这个表格是通过遍历一些数据创建的。即使id和class相同，jQuery也不会在鼠标进入时触发函数。

- bocamp

Answer 1

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

jQuery提供了带有on函数上的selector参数的委派处理程序功能。

例如：

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

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

- Lucas Trzesniewski

---

非常感谢。该函数现在正在innerHTML上运行。 - bocamp

Answer 2

在DOM元素被覆盖后，事件不再附加到DOM元素。使用委托事件可以解决您的问题。 $('#myTable tr td.myCell').on('mouseenter',function(){alert('omg help'); }

在委托事件中，您将事件处理程序附加到父元素，而不是直接附加到目标元素。这样，即使目标元素被更改或替换，事件仍然会触发。

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

- Praveen Reddy