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時仍然會觸發正確的點擊事件。