JQuery trigger ('click') не запускается .click event on checkbox

У меня есть таблица с флажком check-all в заголовке, который проверяет все флажки в этом столбце таблицы:

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

Однако на одной из моих страниц я хочу автоматически проверить флажок check-all на загрузке страницы.

Для этого я попытался запустить триггер ('click'), как показано ниже:

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

Это проверяет флажок в порядке, но не запускает мое пользовательское событие click для флажков с классом .check-all (ниже):

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

Я также попробовал добавить Javascript setTimeout, считая, что пользовательская функция щелчка еще не загружалась, но по-прежнему не запускала пользовательскую функцию щелчка после ожидания 1, 2 и 3 секунды.

При загрузке страницы я могу снять флажок и проверить его, чтобы проверить все флажки в столбце.

Должен ли я добавить что-то особенное в мой jQuery на Document.ready, чтобы он мог запускать пользовательское событие click?

*** EDIT1:

Хорошо, я попытался добавить пользовательское событие click прямо над функцией document.ready на моей странице, чтобы обеспечить его загрузку (поскольку предыдущее пользовательское событие click находится в файле .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(), которые оба делают то же самое в моей ситуации.

Ответы

Ответ 1

Обновление: это относится только к jQuery 1.8 и ниже. Это было исправлено в jQuery 1.9.

Проблема заключается в том, что ручной вызов click() в jQuery работает иначе, чем фактический щелчок.

Когда вы на самом деле нажимаете, сначала изменяется состояние флажка, вызывается ваш обработчик кликов.

Когда вы вызываете 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 активировал клики.

Ответ 2

Пример:

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

Ниже будет выполнено изменение состояния флажка.

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

Ответ 3

Задание проверенного атрибута программным способом не вызывает соответствующее событие клика, поэтому при установке атрибута вам придется добавить свой собственный .trigger('click').

Ответ 4

Хорошо, учитывая, что мне нужны только эти функциональные возможности на этой отдельной странице, я прошел легкий путь и не пытался запустить пользовательское событие click.

После кофе этим утром это было немного яснее для меня. Я добавил этот код как обход.

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

Это просто проверяет все мои флажки в моей таблице, и надлежащее событие клика по-прежнему запускается, когда мой мастер проверяется после факта.