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

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

本文关键字：click 复选框 事件 触发器 jQuery      更新时间：2023-09-26

我有一个表，在标题中有一个check-all复选框，用于检查表中该列中的所有复选框:

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

然而，在我的一个页面上，我想在页面加载时自动勾选勾选所有复选框。

为了做到这一点，我尝试触发一个触发器('click')函数，如下所示:

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

这可以很好地检查复选框，但不会为类的复选框触发自定义单击事件。检查所有(下图):

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

我也试过添加一个Javascript setTimeout，认为自定义点击函数还没有被加载，但它仍然没有在等待1,2,3秒后触发自定义点击函数。

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

我必须添加一些特殊的东西到我的jQuery文档。准备好允许它触发自定义单击事件了吗?

* * * EDIT1:

好的，我已经尝试在文档的正上方添加自定义的单击事件。在我的页面上的ready函数，以确保它被加载(因为以前的自定义单击事件是在主.js文件中使用我的_Layout)。除此之外，我已经改变了我的复选框的类，以对应于我的新的自定义点击事件，所以我不会与我的主。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()，它们在我的情况下都做同样的事情。

更新:这只适用于jQuery 1.8及以下版本。

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

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

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

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

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

参见在jQuery中，为什么通过编程触发'click()'在一个复选框上不立即勾选它?有关实际手动单击和jquery触发的单击之间的差异的更全面的解释。

示例:

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

以下语句将在复选框状态改变后执行:

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

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

好了，考虑到我只需要在单个页面上使用该功能，我选择了简单的方法，避免尝试一起启动自定义单击事件。

今天早上喝完咖啡后，我明白了一些。我添加这段代码是为了解决这个问题。 
$(document).ready(function () {
        $('table#OHTable input[type=checkbox]').attr('checked', 'checked');
    });

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

相关文章：