Javascript 选中prop（）复选框不会触发附加到“的事件”；更改“；

使用jQuery

prop（）

选中的框不会影响附加到

change

处理程序的侦听器

我的代码类似于

HTML

当我单击复选框时，会触发警报。当复选框的属性更改时，如何使其启动

您必须使用来触发更改事件侦听器：

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


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

或

---

请注意，这将引发许多事件。jsBin中的html示例中有三个。从函数内部触发事件：

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

---

在大多数情况下，在更新属性时触发更改事件应该是可接受的答案，但是，在某些情况下，属性会被调整，并且您没有必要添加触发函数调用。一个常见的例子是脚本在外部托管

下面的代码段将使用当前的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 );
    }});
});

然后，为了捕获更改事件，您可以绑定到任何一个侦听器中，甚至可以根据需要比较属性名称和旧值（或者如果挂接到before事件中，则比较新值）

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）函数中。

我发现使用

.trigger（“change”）

更优雅，因为它可以在设置检查后直接执行。

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');
    }
});