Почему динамическое изменение флажка не вызывает событие изменения формы?

Я написал этот фрагмент javascript/jQuery, чтобы изменить флажок. http://jsfiddle.net/johnhoffman/crF93/

Javascript

$(function() {
    $("a").click(function() {
       if ($("input[type='checkbox']").attr('checked') == "checked")
           $("input[type='checkbox']").removeAttr('checked');
       else
           $("input[type='checkbox']").attr('checked', 'checked');
       return false;
    });

    $("input[type='checkbox']").change(function(){ 
        console.log("Checkbox changed.");            
    });    
});​

HTML

<input type="checkbox" />
<a href="#">Change CheckBox</a>​

Интересно, что нажатие ссылки изменяет текстовое поле, но не вызывает событие изменения формы, которое вызывает функцию, которая регистрирует сообщение в консоли Chrome Web Developer Console. Зачем? Как мне сделать это?

Ответы

Ответ 1

Вам нужно инициировать событие изменения, .trigger('change'), так что событие знает, что произошло изменение.

От http://api.jquery.com/change/:

Описание: Привязать обработчик события к событию "изменить" JavaScript или вызвать это событие для элемента.

Этот метод является ярлыком для .on( "change", handler ) в первых двух вариантах, а .trigger( "change" ) в третьем.

Событие change отправляется элементу при изменении его значения. Это событие ограничено <input> элементами, <textarea> и <select> элементами. Для флажков выбора, флажков и переключателей событие запускается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не теряет фокус.

Демо:

http://jsfiddle.net/nPkPw/3/

Использование цепочки: http://jsfiddle.net/nPkPw/5/
т.е. $("input[type='checkbox']").trigger('change').attr('checked', 'checked');

Ответ 2

Это не удивительно, но я думаю, вы могли бы это сделать в списке неэффективных в msdn.

  • "Это событие запускается, когда содержимое зафиксировано, а не во время значение меняется. "
  • "Событие onchange не срабатывает, когда выбранная опция объекта выбора изменяется программно. "

Вы всегда можете просто .click() его jsFiddle