La modification de .prop à l'aide de jQuery ne déclenche pas d'événement .change


125

J'ai un écouteur d'événement sur une case à cocher:

<input type="checkbox" name="something">

Mon auditeur d'événements:

$('input[type="checkbox"][name="something"]').change(function() { 
    //DO SOMETHING 
});

J'ai un autre écouteur d'événements qui change .propla case à cocher:

$('#button').click(function() { 
    $('input[type="checkbox"][name="something"]').prop("checked", false);
});

Lorsque je coche les DO SOMETHINGdéclencheurs de case à cocher . Lorsque je clique sur #button, les .propchangements et que je vois la case à cocher décocher visuellement, mais DO SOMETHINGne se déclenche pas ...

Quelque chose que je néglige?


Réponses:


196

L'événement de modification est déclenché lorsque la valeur est modifiée par l'interaction des utilisateurs sur la page et non lorsque la valeur est modifiée à l'aide du code.

Ici, vous devez utiliser .change()ou .trigger("change")après avoir modifié la propriété:

$('input[type="checkbox"][name="something"]').prop("checked", false).change();

Démo de travail


2
Je pensais que props'occupait de la génération d'événements de changement?
— Fini le codage le

1
Cool. Merci. Bonne démonstration prouvant le concept. +1 Merci.
— Fini le codage le

Merci! Donc, la raison pour laquelle .prop (). Change () n'a pas fonctionné de mon côté est que je fais jQuery dans MeteorJS, qui a une façon légèrement différente d'appeler jQuery. J'ai essayé exactement à votre façon et cela a fonctionné.
— fuzzybabybunny

@fuzzybabybunny: ce n'est pas à cause de MeteorJS. prop () ne déclenche pas d'événement de changement.
— Milind Anantwar

@MilindAnantwar, je faisais .prop suivi de .change dans le code Meteor ( Template.myTemplate.events) et cela n'a pas fonctionné. J'ai ensuite mis le même code jQuery exact sous Template.myTemplate.renderedet tout s'est bien passé.
— fuzzybabybunny
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.