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

Lan*_*ndo 12 javascript checkbox jquery triggers click

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

<input class="check-all" type="checkbox" id="masterCheck" />
Run Code Online (Sandbox Code Playgroud)

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

要做到这一点,我试图触发一个触发器('click')函数,如下所示:

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

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

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

我也尝试添加一个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();
        }
    });
Run Code Online (Sandbox Code Playgroud)

这似乎是在自定义点击事件中引发我的警报,这是进步,但无济于事我的所有复选框都应该检查它们应该如何.注意:我还将触发器('click')更改为.click(),在我的情况下它们都做同样的事情.

Ben*_*Lee 31

更新:这仅适用于jQuery 1.8及更低版本.这是在jQuery 1.9修复的.

问题是手动调用click()jQuery的工作方式与实际点击不同.

实际单击时,首先更改复选框状态,然后调用单击处理程序.

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

因此,当您click在单击处理程序中调用时,this.checked仍然会出现错误.您可以通过使其成为change处理程序而不是处理程序来解决此问题click,如下所示:

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

请参阅在jQuery中,为什么以编程方式触发复选框上的"click()"而不是立即检查它?有关实际手动点击和jquery触发点击之间差异的更全面解释.