JQuery更改事件侦听器可在Chrome中工作，但不能在Firefox中工作

Question

我得到了一个带有长表的网页来显示数据。使用JQuery Tablesorter，我使表可排序。

页面的最后一列包含复选框(类为chk(，允许用户选择多个条目。在表头中还有一个复选框(id为checkall，没有类(。单击此复选框，所有到其他复选框的值应翻转。由于页面需要一些时间才能完全加载，因此我使用$(window).load()函数而不是$(document).ready()。

我得到了以下JavaScript代码：

$(window).load(function() {
$('#checkall').change(function() {
if ($('#checkall').is(":checked")) {
$('.chk').prop('checked', true);
} else {
$('.chk').prop('checked', false);
}
});
});

这在Chromium中可以正常工作，但在Firefox中则不然。在玩了一遍代码之后，更改侦听器似乎甚至没有在Firefox中设置。在选中复选框时，不会执行我放入内部函数代码中的任何内容，而$(window).load()函数会按预期执行。当我改为添加click()处理程序或使用on("change, function(){...})时，也会发生同样的行为。

这是JQuery错误还是我做错了什么？

我使用JQuery 3.6.0和JQuery Migrate 1.4.1。

更新：

我发现这似乎是一个时间问题/比赛条件。如果我有时重新加载页面，它在Firefox中也能工作，大约10次尝试中就有1次。但我仍然不知道原因是什么以及如何解决

Answer 1

这里有一种使用事件委派的方法。您需要一个在document.ready被激发时存在于DOM中的元素。假设元素是表。你会写：

$(function() {
$("#the-table").on("click", "#checkall", function() {
// toggle stuff
});
});

在这种情况下，事件处理程序被绑定到表。它将捕获所有点击，如果事件的发起者是复选框，它将触发回调。