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

Question

我得到了一个长table的网页来显示数据。使用 JQuery Tablesorter 我制作了 table sortable.

页面的最后一列包含复选框（带有 class chk），以允许用户 select 多个条目。在 table header 中还有一个复选框（id 为 checkall 而没有 class）。通过单击此复选框，所有其他复选框的值应该翻转。由于页面需要一些时间才能完全加载，我使用 $(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 中不工作。在玩弄代码后，似乎 Change-Listener 甚至没有在 Firefox 中设置。我放入内部函数代码的任何内容都不会在选中复选框时执行，而 $(window).load() 函数会按预期执行。当我改为添加 click() 处理程序或使用 on("change, function(){...}).

时，会发生相同的行为

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

我正在使用 JQuery 3.6.0 和 JQuery 迁移 1.4.1。

更新：

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

Answer 1

这是一种使用事件委托的方法。您需要一个在 document.ready 被触发时出现在 DOM 中的元素。假设该元素是 table。你会写：

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

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

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

JQuery change event listener working in Chrome, but not in Firefox

javascript

jquery

events