(Jquery)click event wordt 2x uitgevoerd
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(".size.is_clickable").click(function() {
var shopbag = $("#shopbag");
shopbag.data("cursize", $(this).data("size"));
console.log($(this).data("size").name);
shopbag.removeAttr("disabled");
$(".size").removeClass("is_active");
$(this).addClass("is_active");
});
var shopbag = $("#shopbag");
shopbag.data("cursize", $(this).data("size"));
console.log($(this).data("size").name);
shopbag.removeAttr("disabled");
$(".size").removeClass("is_active");
$(this).addClass("is_active");
});
De code binnen de functie wordt 2x uitgevoerd bij een klik (ik dacht eerst dat ik een zenuwtrek had), terwijl ik dit maar één keer gebind heb. De elementen worden net ervoor aangemaakt.
Ik dacht eerst dat het door de dubbele class kwam, maar ik heb op een andere plaats een soortgelijk iets en dat gaat wel goed. Zien jullie iets wat ik over het hoofd zie?
$(".size.is_clickable") is wat me opvalt, je plakt twee classnames aan elkaar. waarom is dat?
Ger van Steenderen op 05/05/2013 09:21:21:
De elementen worden net ervoor aangemaakt.
Begrijp ik het dan goed dat het dynamisch aangemaakte elementen zijn? In dat geval is het van belang hoe je het bind, want een click functie wordt niet automatisch gebind aan een nieuw element, dat moet je dus zelf ergens doen.
@Erwin,
Inderdaad worden de elementen dynamisch gegenereerd, maar het binden gebeurd in dezelfde functie die de elementen genereert. Maar het lijkt erop dat het zelfs 2x keer gebind wordt want ik zie telkens 2x de waarde verschijnen in de console.
Vandaar de vraag, laat eens zien hoe je ze bind. Daar gaat het waarschijnlijk mis.
e.preventDefault() aan het begin toegevoegd en nu gaat het goed.
Een kleine jQuery tip, gebruik .on() dat is veel beter bijna dynamische toegevoegde elementen
Wat is het verschil dan met .click()?
Dit zorgt ervoor dat je dus oneindig veel childs kunt toevoegen zonder opnieuw het event te moeten registreren op de child. Het zorgt ook voor een significant snellere applicatie.
.click:
This method is a shortcut for .on('click', handler)....
Maar volgens jou zit er toch verschil tussen de twee?
Ook even een andere vraag, stel ik heb een klik event op de parent div maar ook op een child div.
Krijg ik dan hetzelfde als met de radio input, dus dat de klik event van de parent 2x uitgevoerd wordt als ik op het child klik?