отмеченные с помощью 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
Вы должны использовать .change(), чтобы запустить прослушиватель событий изменения:
$("body").on("change", ".ch", function () {
alert("checked");
});
$("body").on("click", "#select", function () {
$(this).parent("div").find("input[type=checkbox]").prop("checked", true).change();
});
Обратите внимание, что это вызовет много событий. Три в примере html у вас есть в jsBin.
Запустите событие изнутри вашей функции:
$("body").on("click", "#select", function(){
$(this).parent("div").find("input[type=checkbox]").prop("checked", true).trigger("change");
});
В большинстве случаев инициирование события изменения при обновлении свойства должно быть принятым ответом, однако есть некоторые случаи, когда свойства корректируются, и у вас нет роскоши для добавления вызова функции триггера. Обычный пример - это когда 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).