单击元素时 JS 功能不起作用

Question

首先我要解释情况，然后是问题。

我正在设计一个包含一些数据的表格，并且我开发了一些函数来在单击列的“th”标签时对这些数据进行排序。

$('#table_id > thead > tr > th').click(function() ...
//ordering algorithm

此外，我创建了 2 个“选择”标签来过滤表的数据。 我用于过滤数据的方法是搜索与选择文本匹配的文本并使用 remove() 方法删除该行。

document.getElementById("select_id").addEventListener("change", function() {
//remove rows

当数据被过滤（通过选择）并且我尝试单击列的“th”标签时，“click”方法不起作用并且控制台中没有错误消息，所以我不知道如何解决它。

任何人都知道“点击”方法会在页面内容更改时更改其功能吗？

谢谢阅读。 如果需要更多代码来理解问题，我会粘贴它。

Answer 1

如果您在页面呈现后更改 DOM，请尝试使用.on()

$(document).on('click', '#table_id > thead > tr > th', function() { ... });

Answer 2

这似乎是动态加载元素的问题。

这是一个重复的问题，已在此处回答：

事件处理程序不适用于动态内容

Answer 3

如果原来的th从 DOM 中删除，然后插入了新的th ，则不再为其分配 click 事件，因此您需要重新分配它。

另一种方法就像 Nick Surmanidze 建议的那样。