[jQuery]click events die zich vermenigvuldigen

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • com2,1ghz
  • Registratie: Oktober 2004
  • Laatst online: 11-09 10:19
Beste Tweakers,

Ik ben bezig met het bouwen van een website waarmee ik dmv javascript/jQuery navigeer. Hiervoor maak ik gebruik van de .load() functie van jQuery waardoor pagina;s in worden geladen en de browser de webpagina niet ververst.

Dit werkt allemaal heel mooi allemaal maar het probleem is als volgt:
De pagina''s die ingeladen worden hebben ook content wat gebruik maakt van jQuery en hiervoor heb ik in een algemene .js bestand een aantal methoden aangemaakt zoals: initHomePage() initContactPage();
Zo worden de events ingeladen wanneer ik op een navigatieitem klik.

Voorbeeld
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
    $(".navLink").click(function(){
        var href = $(this).attr("href");
        var splitHref = href.split("?page=");
        var pageName = splitHref[1];

        $("#content .page").load("page/" + pageName + ".php", function(){
             initHomePage();
             initContactPage();
             initOtherPage();
        });
        return false; 
    });


De pagina methode:
JavaScript:
1
2
3
function initHomePage(){
    $("#tabs").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
}


Nou ben ik bezig met het bouwen van een gastenboek icm php en het bij het testen ervan kwam ik erachter dat hoe vaker ik navigeer door de website, des te meer events er geset worden.
Zo werd mijn submit knopje voor mijn gastenboek die ik aan het testen was 3 keer gesubmit wanneer er 3 keer genavigeerd is. Dit wordt 4 keer als er 4 keer genavigeerd wordt. Dit is ook logisch want iedere keer wanneer er door de site wordt genavigeerd, dan wordt er zo vaak de events in geladen.


Wat ik heb geprobeerd:
  • $("#content .page").unload() geplaatst voordat er geladen wordt.
  • $("#content .page").unbind() geplaatst voordat er geladen wordt.
Hoe zorg ik ervoor dat de events van de ingeladen pagina's verdwijnen zodat de nieuwe events ingeladen kunnen worden?

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45

Bosmonster

*zucht*

Je kunt event namespaces gebruiken en alles van die namespace unbinden?

http://api.jquery.com/bind/

Acties:
  • 0 Henk 'm!

Verwijderd

Wat je kan doen is niet een nieuw event inladen elke keer maar eerst controleren OF er een event aan gebonden zit, zo ja doe niets, zo nee, bind event.

Overigens zou ik jQuery niet als main-navigatie methode gebruiken, het is handiger om je site eerst te laten werken zonder javascript/jQuery en dan pas het toe te voegen om het te verrijken. Als je er direct mee ontwikkelt kan dit wel eens een beetje fout gaan. Mocht je dit al gedaan hebben, heb ik dit zojuist niet gezegd ;)

Acties:
  • 0 Henk 'm!

  • com2,1ghz
  • Registratie: Oktober 2004
  • Laatst online: 11-09 10:19
Verwijderd schreef op zaterdag 03 december 2011 @ 10:49:
Wat je kan doen is niet een nieuw event inladen elke keer maar eerst controleren OF er een event aan gebonden zit, zo ja doe niets, zo nee, bind event.

Overigens zou ik jQuery niet als main-navigatie methode gebruiken, het is handiger om je site eerst te laten werken zonder javascript/jQuery en dan pas het toe te voegen om het te verrijken. Als je er direct mee ontwikkelt kan dit wel eens een beetje fout gaan. Mocht je dit al gedaan hebben, heb ik dit zojuist niet gezegd ;)
Ik heb een oplossing gevonden. Misschien niet zo netjes maar het is meer een workaround:
JavaScript:
1
$("#content .page *").unbind();

Hiermee forceer ik wanneer de load() wordt uitgevoerd dat alle events worden vervallen. Deze worden vervolgens opnieuw geset :)

Over dat navigeren heb ik al nagedacht :) Het algemeen navigeren gaat gewoon zoals normaal dmv html en php waarmee ik bij het laden van de webpagina controleer op de page parameter :) Met jQuery schakel ik dus de normale werking van de A element uit en vervang ik het door jQuery.
Dit doe ik niet vanwege de client zonder javascript, maar meer voor de zoekmachine bots :)