(Jquery)click event wordt 2x uitgevoerd

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ger van Steenderen
Tutorial mod

Ger van Steenderen

05/05/2013 09:21:21
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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");        
    });

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?
 
PHP hulp

PHP hulp

24/12/2024 03:57:04
 
Frank Nietbelangrijk

Frank Nietbelangrijk

05/05/2013 09:29:34
Quote Anchor link
$(".size.is_clickable") is wat me opvalt, je plakt twee classnames aan elkaar. waarom is dat?
 
Erwin H

Erwin H

05/05/2013 09:35:05
Quote Anchor link
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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

05/05/2013 10:19:16
Quote Anchor link
@Frank, de selector selecteert dan alleen de elementen die minimaal die 2 classes hebben.

@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.
 
Erwin H

Erwin H

05/05/2013 10:56:28
Quote Anchor link
Vandaar de vraag, laat eens zien hoe je ze bind. Daar gaat het waarschijnlijk mis.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

05/05/2013 11:04:07
Quote Anchor link
Ik heb het inmiddels gevonden, er staat ook een radio in de div (heb hem waarschijnlijk niet meer nodig).
e.preventDefault() aan het begin toegevoegd en nu gaat het goed.
 
Wouter J

Wouter J

05/05/2013 11:49:04
Quote Anchor link
Een kleine jQuery tip, gebruik .on() dat is veel beter bijna dynamische toegevoegde elementen
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

05/05/2013 12:00:10
Quote Anchor link
Wat is het verschil dan met .click()?
 
Wouter J

Wouter J

05/05/2013 13:41:58
Quote Anchor link
Dat je on aan de parent hangt en dat je dus eigenlijk een klik event op de parent hebt. In dat click event wordt dan gekeken of de klik plaats vond op de juiste child, zo ja dan wordt de callback aangeroepen.
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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

05/05/2013 20:14:58
Quote Anchor link
Oké, ik ben altijd in de veronderstelling geweest dat .click(handler) gewoon een verkorte schrijfwijze is van .on('click', handler). Dit staat er in de jQuery doc:
.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?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.