Триггер jQuery ('click') не запускает событие .click на флажке

Question

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

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

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

Для этого я попытался запустить функцию триггера («щелчка»), как показано ниже:

$(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, чтобы позволить ему запускать событие пользовательского щелчка?

*** EDIT1:

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

Answer 1

Обновление: это относится только к 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);
});

См. . Почему в 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

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

Answer 4

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

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

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

Это просто проверяет ВСЕ мои чекбоксы в моей Таблице, и правильное событие щелчка по-прежнему срабатывает, когда по факту щелкает мой masterCheck.