jQuery触发器（'click'）没有触发复选框上的.click事件

Question

我在表格中有一个check-all复选框，用于检查表格列中的所有复选框：

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

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

要做到这一点，我试图触发一个触发器（'click'）函数，如下所示：

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

这样可以检查复选框是否合适，但是不会针对类.check-all （下面）的复选框触发我的自定义单击事件：

$(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()处理程序，然后更改复选框状态。

因此，当您在单击处理程序中调用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

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

Answer 4

好吧，考虑到我只需要在那个单独的页面上使用该功能，我已经走出了简单的方法，并避免尝试一起启动自定义点击事件。

今天早上喝完咖啡后，我觉得有点清楚。 我已将此代码添加为解决方法。

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

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