jQuery 触发器（“click”）未触发复选框上的 .click 事件

Question

我的表标题中有一个全选复选框，它会检查表该列中的所有复选框：

<input class="check-all" type="checkbox" id="masterCheck" />

但是，在我的一个页面上，我想在页面加载时自动检查全选复选框。

为此，我尝试触发一个触发器（'click'）函数，如下所示：

$(document).ready(function () {
    if ($("#masterCheck").attr('checked')) {
    } else {
        $("#masterCheck").trigger('click');
    }
});

这可以很好地检查复选框，但不会触发类 .check-all< 的复选框的自定义单击事件/strong>（如下）：

$(function () {
    $('.check-all').click(function () {
        $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
});

我还尝试添加 Javascript setTimeout，认为自定义点击功能尚未加载，但在等待 1、2 和 3 后仍然没有触发自定义点击功能秒。

页面加载后，我可以取消选中预先选中的复选框并重新选中它以完美选中该列中的所有复选框。

我是否必须在 Document.ready 上的 jQuery 中添加一些特殊的内容才能允许它触发自定义单击事件？

***EDIT1：

好的，我尝试在页面上的 document.ready 函数上方添加自定义单击事件，以确保其已加载（因为之前的自定义单击事件位于我的 _Layout 中使用的主 .js 文件中） 。除此之外，我还更改了复选框的类以与新的自定义单击事件相对应，这样就不会与主 .js 文件中的类发生冲突。

<input class="check-allx" type="checkbox" id="masterCheck" />


// Check all checkboxes when the one in a table head is checked:
    $(function () { 
        $('.check-allx').click(function () {
            $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
            alert(this);
        });
    });
// Check for unchecked masterCheck
    $(document).ready(function () {
        if ($("#masterCheck").attr('checked')) {
        } else {
            //$("#masterCheck").trigger('click');
            $("#masterCheck").click();
        }
    });

这似乎在自定义点击事件中抛出了我的警报，这是进度，但我的所有复选框都没有像应有的那样进行检查。注意：我还将触发器（'click'）更改为 .click()，在我的情况下两者都执行相同的操作。

Answer 1

更新：这仅适用于 jQuery 1.8 及更低版本。这是 在 jQuery 1.9 中已修复。

问题在于，在 jQuery 中手动调用 click() 的工作方式与实际单击不同。

当您实际单击时，首先更改复选框状态，然后调用您的单击处理程序。

当您调用 click() 时，首先调用单击处理程序，然后更改复选框状态。

因此，当您在点击处理程序中调用 click 时，this.checked 仍然为 false。您可以通过将其设置为 change 处理程序而不是 click 处理程序来解决此问题，如下所示：

$('.check-allx').change(function () {
    $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
});

请参阅在 jQuery 中，为什么以编程方式触发复选框上的“click()”不会立即选中它？ 获取有关实际手动点击和 jquery 触发点击之间差异的更完整解释。

Answer 2

示例：

$("#recurrence").trigger('click');

以下代码将在复选框状态更改后执行。

$("#recurrence").click(function () {
    $(this).change(function(){
        if (this.checked) {
            $(".recurr-section").show();
        } else {
            $(".recurr-section").hide();
        }
    });        
});

Answer 3

以编程方式设置选中的属性不会触发相应的点击事件，因此您在设置属性时必须添加自己的.trigger('click')。

Answer 4

好吧，考虑到我只需要该单独页面上的功能，我采取了简单的方法，避免尝试一起启动自定义点击事件。

今天早上喝完咖啡后，我的思路更加清晰了。我已添加此代码作为解决方法。

$(document).ready(function () {
        $('table#OHTable input[type=checkbox]').attr('checked', 'checked');
    });

这只是检查表中的所有复选框，并且当事后单击我的 masterCheck 时，仍然会触发正确的单击事件。