Javascript jQuery 触发器（'click'）不会触发复选框上的 .click 事件

jQuery trigger('click') not firing .click event on checkbox

提问by Lando

I have table with a check-all checkbox in the header which checks all the checkboxes in that column of the table:

我在表头中有一个全选复选框的表格，用于检查表格该列中的所有复选框：

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

However, on one of my pages I would like to automatically check the check-all checkbox on page load.

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

To do this I've attempted to fire a trigger('click') function like the one below:

为此，我尝试触发如下所示的 trigger('click') 函数：

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

This checks the checkbox fine, but doesn't fire my custom click event for checkboxes with the class .check-all(below):

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

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

I've also tried adding a Javascript setTimeout, thinking that the custom click function wasn't being loaded quite yet, but it still didn't fire the custom click function after waiting 1, 2, and 3 seconds.

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

Upon page load, I can then un-check my pre-checked checkbox and re-check it to check all of the checkboxes in the column perfectly.

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

Do I have to add something special to my jQuery on the Document.ready to allow it to fire the custom click event?

我是否必须在 Document.ready 上为我的 jQuery 添加一些特殊的东西以允许它触发自定义单击事件？

***EDIT1:

***编辑1：

Ok, I've attempted to add the custom click event right above the document.ready function on my page to ensure it's loaded (as the previous custom click event is in a master .js file used in my _Layout). In addition to this, I've changed the class of my checkbox to correspond with my new custom click event so I don't conflict with the one in my master .js file.

好的，我已经尝试在我的页面上的 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();
        }
    });

This seems to throw my alert within the custom click event which is progress, but to no avail do all my checkboxes check like they should. Note: I've also changed the trigger('click') to a .click(), which both do the same thing in my situation.

这似乎在自定义点击事件中抛出我的警报，这是进度，但无济于事，我所有的复选框都像他们应该的那样检查。注意：我还将 trigger('click') 更改为 .click()，在我的情况下，它们都执行相同的操作。

回答by Ben Lee

Update: This only applies to jQuery 1.8 and below. This was fixed in jQuery 1.9.

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

The problem is that manually calling click()in jQuery works differently than an actual click.

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

When you actually click, first the checkbox state is changed, then your click handler is called.

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

When you call click(), first the click handler is called, then the checkbox state is changed.

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

So when you call click, in your click handler, this.checkedis still going to be false. You can fix this by making it a changehandler instead of a clickhandler, like this:

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

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

See In jQuery, why does programmatically triggering 'click()' on a checkbox not immediately check it?for a fuller explanation of the difference between actual manual clicks and jquery triggered clicks.

请参阅在 jQuery 中，为什么以编程方式触发复选框上的“click()”不立即检查它？更全面地解释实际手动点击和 jquery 触发点击之间的区别。

回答by Simbu

Example:

例子：

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

The below will be executed after the checkbox state change.

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

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

回答by nnnnnn

Setting the checked attribute programmatically doesn't trigger a corresponding click event, so you'd have to add your own .trigger('click')when you set the attribute.

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

回答by Lando

Alright, considering I only needed that functionality on that individual page I've gone the easy way out and avoided trying to launch the custom click event all together.

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

After a coffee this morning it a was a bit clearer to me. I've added this code as a work-around.

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

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

This simply checks ALL my checkboxes in my Table, and the proper click event is still fired when my masterCheck is clicked after the fact.

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