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?

peluche bébé
la source

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

Milind Anantwar
la source
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