jQuery по-разному реагирует на нажатие () для пользовательских и программных триггеров

Question

Вот код:

this.Form.find("input[type=checkbox]").click(function(event) {
    if ($(this).is(":checked")) {
        console.log("checked");
    }
    else {
        console.log("unchecked");
    }
});

Если флажок не установлен, и я щелкаю мышью, я получаю «флажок». Если я запускаю это программно, как $("#someCheckbox").click(), я получаю «непроверенный». Как заставить двоих вести себя одинаково?

Answer 1

После просмотра вашего комментария я немного протестировал.Мне удалось заставить его работать так, как вы хотите, в FF и IE, используя метод щелчка DOM на флажке вместо вызова события щелчка jQuery.

<script type="text/javascript">
$(function() {
    $("input:checkbox").click( function() {
        if ($(this).is(':checked')) {
            alert('checked');
        }
        else {
            alert('not checked');
        }
    });
    $('a').click( function() {
        $('#cb').get(0).click();
        return false;
    });
});
</script>


<p>
<a href='#'>click a box</a>
</p>
<input id="cb" name="cb" type="checkbox" value="0" /> 0<br />

Answer 2

Эта проблема возникает из-за довольно сложной проблемы с синхронизацией событий в недрах jQuery.Вот сообщение в блоге , в котором подробно обсуждается (плюс ссылка на SO-ответ, который я получил от ).

К счастью, если вы пытаетесьdo программно переключает флажок и запускает связанные функции этого флажка, 9 раз из 10 вы можете обойти все эти сложности, просто заменив привязку .click(function(){}) на привязку .change(function(){}).

В отличие от click, с change связанное событие всегда будет по определению вызывать после щелчок вызвал изменение состояния флажка.Функция всегда будет видеть новое состояние флажка.

Как и click, событие срабатывает только после того, как событие, похожее на щелчок, попадает в флажок, поэтому при манипулировании флажком с помощью js у вас все равно будет выбор:изменение состояния щелчка с помощью .attr() и .removeAttr() без запуска связанных функций или .click() с помощью флажка для запуска связанных функций.

Answer 3

Возможно, вы захотите проверить, работает ли он как в Firefox, так и в Internet Explorer. Я столкнулся с некоторыми проблемами с флажком. Проверьте это здесь!

Answer 4

Когда вы нажимаете флажок, вы изменяете его состояние с непроверенного на проверенный или наоборот. При запуске события click вы просто вызываете функцию-обработчик с ложным объектом события, вы фактически не меняете состояние.

Перед тем, как запустить событие, переключите состояние флажка, добавив следующий код:

var myInput = $("input[type=checkbox]")[0];
myInput.checked = !myInput.checked;

Возможно, вам придется заменить селектор для работы с вашим собственным кодом.