javascript 使用 prop() 选中的复选框不会触发附加到“更改”的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19505011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
checkbox checked with prop() does not fire events attached to "change"
提问by 1252748
boxes checked using jQuery prop()do not affect listeners attached to changehandler.
使用 jQuery 检查的框prop()不会影响附加到change处理程序的侦听器。
My code is something like
我的代码是这样的
HTML
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
JS
$("body").on("change", ".ch", function(){
alert("checked");
});
$("body").on("click", "#select", function(){
$(this).parent("div").find("input[type=checkbox]").prop("checked", true);
});
the alert fires when I click on the checkbox. How can I make it fire when the property of the checkbox changes? JSBIN
当我单击复选框时会触发警报。当复选框的属性发生变化时，如何使其触发？JSBIN
回答by Sergio
You have to use .change()to trigger the change event listener:
您必须使用.change()来触发更改事件侦听器：
$("body").on("change", ".ch", function () {
alert("checked");
});
$("body").on("click", "#select", function () {
$(this).parent("div").find("input[type=checkbox]").prop("checked", true).change();
});
JSBbinor Fiddle
JSBbin或Fiddle
Please note that this will fire many events. Three in the html example you have in jsBin.
请注意，这将触发许多事件。jsBin 中的 html 示例中的三个。
回答by Todd
Trigger the event from inside your function:
从函数内部触发事件：
$("body").on("click", "#select", function(){
$(this).parent("div").find("input[type=checkbox]").prop("checked", true).trigger("change");
});
回答by Shaun Cockerill
In most cases, triggering the change event when you update a property should be the accepted answer, however, there are some instances where properties are adjusted, and you do not have the luxury to add a trigger function call. A common example is when a script is hosted externally.
在大多数情况下，在更新属性时触发更改事件应该是公认的答案，但是，在某些情况下会调整属性，并且您没有奢侈地添加触发器函数调用。一个常见的例子是脚本在外部托管。
The below snippet will use the current jQuery prop function to get and/or change the property value, but will also trigger two events, one before property is changed, and another for after the property has been changed. Both the property name and alternating value will also be passed.
下面的代码片段将使用当前的 jQuery prop 函数来获取和/或更改属性值，但也会触发两个事件，一个是在属性更改之前，另一个是在属性更改之后。属性名称和交替值也将被传递。
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 );
}});
});
Then in order to capture the change event, you can bind into either listener, and even compare the property name and old value (or new value if you hook into the before event) as required.
然后，为了捕获更改事件，您可以绑定到任一侦听器，甚至根据需要比较属性名称和旧值（如果挂钩到 before 事件，则为新值）。
jQuery('input[type="checkbox"]').on('propChanged', function( event, prop, oldVal ) {
if ( prop === 'checked' && oldVal !== jQuery(this).prop( prop ) ) {
jQuery(this).trigger('change');
}
});
This can be used for any property, and is also not just limited to checkboxes and change events.
The same snippet above can also be copied to work with the jQuery(el).attr(attr,val)function.
这可以用于任何属性，并且不仅限于复选框和更改事件。也可以复制上面的相同片段以使用该jQuery(el).attr(attr,val)函数。
