web-dev-qa-db-fra.com

case à cocher cochée avec prop () ne déclenche pas les événements attachés à "changer"

les cases cochées à l'aide de jQuery prop() n'affectent pas les écouteurs attachés au gestionnaire change.

Mon code est quelque chose comme

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

});

l'alerte se déclenche lorsque je clique sur la case à cocher. Comment puis-je le déclencher lorsque la propriété de la case à cocher change? JSBIN

javascriptjqueryhtml
25
1252748

Vous devez utiliser .change () pour déclencher l'écouteur d'événement 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 ou Fiddle

Veuillez noter que cela déclenchera de nombreux événements. Trois dans l'exemple HTML que vous avez dans jsBin.

30
Sergio

Déclenchez l'événement de l'intérieur de votre fonction:

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

Dans la plupart des cas, le fait de déclencher l'événement de changement lorsque vous mettez à jour une propriété devrait être la réponse acceptée. Toutefois, dans certains cas, les propriétés sont ajustées et vous n'avez pas le luxe d'ajouter un appel de fonction de déclencheur. Un exemple courant est lorsqu'un script est hébergé en externe.

L'extrait ci-dessous utilisera la fonction actuelle de jQuery pour obtenir et/ou modifier la valeur de la propriété, mais déclenchera également deux événements, l'un avant la modification de la propriété et l'autre après la modification de la propriété. Le nom de la propriété et la valeur alternative seront également transmis.

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

Ensuite, afin de capturer l'événement change, vous pouvez vous connecter à l'un des deux écouteurs et même comparer le nom de la propriété et l'ancienne valeur (ou la nouvelle valeur si vous vous connectez à l'événement before) selon les besoins.

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

Ceci peut être utilisé pour n'importe quelle propriété et ne se limite pas uniquement aux cases à cocher et aux événements de changement. Le même extrait de code ci-dessus peut également être copié pour fonctionner avec la fonction jQuery(el).attr(attr,val).

0
Shaun Cockerill