Checkbox checked with prop() не срабатывает при подключении к "change"

Флаги

отмеченные с помощью jQuery prop(), не влияют на прослушиватели, прикрепленные к обработчику change.

Мой код похож на

HTML

<div>
    <label>
        <input type="checkbox" class="ch" />test</label>
    <label>
        <input type="checkbox" class="ch" />test</label>
    <label>
        <input type="checkbox" class="ch" />test</label>
    <input type="button" value="check the box" id="select" />
</div>

JS

 $("body").on("change", ".ch", function(){

  alert("checked");

});


$("body").on("click", "#select", function(){

  $(this).parent("div").find("input[type=checkbox]").prop("checked", true);

});

предупреждение появляется, когда я нажимаю на этот флажок. Как я могу запустить его при изменении свойства флажка? JSBIN

ОТВЕТЫ

Ответ 1

Вы должны использовать .change(), чтобы запустить прослушиватель событий изменения:

$("body").on("change", ".ch", function () {
    alert("checked");
});


$("body").on("click", "#select", function () {
    $(this).parent("div").find("input[type=checkbox]").prop("checked", true).change();
});

JSBbin или Fiddle

Обратите внимание, что это вызовет много событий. Три в примере html у вас есть в jsBin.

Ответ 2

Запустите событие изнутри вашей функции:

$("body").on("click", "#select", function(){
  $(this).parent("div").find("input[type=checkbox]").prop("checked", true).trigger("change");
});

Ответ 3

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

В приведенном ниже фрагменте будет использоваться текущая функция поддержки jQuery для получения и/или изменения значения свойства, но также будет инициировать два события: одно до изменения свойства и другое после того, как свойство было изменено. И имя свойства, и переменное значение также будут переданы.

jQuery(function(){
    var _oldProp = jQuery.fn.prop;
    jQuery.fn.extend({prop: function( prop, val ) {
        // Only trigger events when property is being changed
        if ( val !== undefined ) {
            this.trigger( 'propChange', [prop, val] );     // before change listener
            var oldVal = this.prop( prop );                // Get old Value
            var ret = _oldProp.call( this, prop, val );    // Update Property
            this.trigger( 'propChanged', [prop, oldVal] ); // after change listener
            return ret;
        }
        return _oldProp.call( this, prop );
    }});
});

Затем, чтобы зафиксировать событие изменения, вы можете привязать его к любому слушателю и даже сравнить имя свойства и старое значение (или новое значение, если вы подключаетесь к предыдущему событию) по мере необходимости.

jQuery('input[type="checkbox"]').on('propChanged', function( event, prop, oldVal ) {
    if ( prop === 'checked' && oldVal !== jQuery(this).prop( prop ) ) {
        jQuery(this).trigger('change');
    }
});

Это может использоваться для любого свойства, а также не ограничивается только флажками и событиями изменения. Этот же фрагмент выше также можно скопировать для работы с функцией jQuery(el).attr(attr,val).