jQuery - arrête la propagation lors de la sélection d'une case à cocher ou td - javascript, php, jquery, case à cocher

Je souhaite activer une case à cocher située dans un td en cliquant sur le td lui-même (et / ou la case à cocher).

J'ai le code suivant:

$("[id^=musicCheckboxHoldingTD]").on("click", function (e) {
e.stopPropagation();
$this = $(this);
$this.find(".musicSelectionRoundCheckbox:checkbox").click();

});
$(".musicSelectionRoundCheckbox:checkbox").click(function(e) {
e.stopPropagation();
$this = $(this);
musicCheckboxToggled($this); // this function gets called twice
});

Lorsque je clique uniquement sur le td, cela fonctionne parfaitement.

Si je clique sur la case à cocher dans le td, la fonction est appelée deux fois en raison d'un événement pour le td ET d'un événement pour la case à cocher.

Comment puis-je empêcher que cela se produise si la fonction n'est exécutée qu'une seule fois?

Merci :-)

Réponses:

1 pour la réponse № 1

Avez-vous vraiment besoin de deux événements? D'après ce que je vois, le fait d'avoir juste l'événement sur le td sans arrêter la propagation vous permettrait d'avoir un gestionnaire pour votre case à cocher + td.

$("#musicCheckboxHoldingTD").on("click", function (e) {
musicCheckboxToggled($(this));
});

Si votre td a autre chose qui ne devrait pas déclencher l'événement, vous pouvez régler le sélecteur et empêcher sa propagation.

$("#musicCheckboxHoldingTD, #musicCheckboxHoldingTD > input[type=checkbox]").on("click", function (e) {
e.stopPropagation();
musicCheckboxToggled($(this));
});

---

0 pour la réponse № 2

J'ai eu beaucoup de problèmes avec cela et il semble que le navigateur "vérifie" la case à cocher, puis mon événement jquery a été inversé.

J'ai fini par désactiver la case à cocher en mettant disabled="disabled" en ligne avec l'élément d'entrée HTML.

Ensuite, j'ai utilisé le code jQuery suivant:

$("[id^=musicCheckboxHoldingDiv]").on("click", function (event) {
event.stopPropagation(); // stop the event bubble up
$this = $(this);
var obj =$this.find("input");
obj.prop("checked", !obj.is(":checked"));
musicCheckboxToggled();

});

Cela fonctionne pour le moment. Si quelqu'un peut voir des problèmes avec cette réponse, faites-le-moi savoir dans les commentaires ou améliorez-le avec une autre réponse. Je le laisserai quelques jours et le marquerai comme la réponse acceptée autrement.

Merci pour l'aide de tous :-)

---