Verlangsamt Jquery Webseiten?

Question

Ich habe ein Problem Ich benutze jquery U.I Tabulatoren, die alles mit Ajax laden. Jetzt habe ich es sofort, jedes Mal wenn Sie auf eine Registerkarte klicken, wird eine Teilansicht in diese Registerkarte geladen.

Jetzt in dieser Teilansicht sind sie Javascript-Dateien, die jquery verwenden, um alle Ereignisse zu binden, die in diesem Tab benötigt werden, plus einige Jquery-Plugins, die ich verwende.

Jedes Mal, wenn diese Registerkarte geladen wird, werden alle diese Skripts geladen. Wenn es 10 Mal angeklickt wird, dann werden diese Skripte 10 Mal geladen, wobei jetzt jeder von sagen, meine Buttons haben jetzt 10 der gleichen Ereignisse, bedeutet das, wenn jemand auf diesen Knopf klickt, werden 10 Ereignisse alle abfeuern und dasselbe tun.

Also muss ich eine Lösung finden, um entweder das ganze Skript zu verschieben und es auf der Hauptseite zu haben und jquery.live oder eine andere Lösung zu verwenden.

Ich habe versucht, Jquery-Caching für die UI-Registerkarten zu verwenden, aber dies wird nicht funktionieren, da einige Dinge in Tab A beim Ändern Effekt Tab B bedeutet, ich brauche Tab B neu geladen werden, aber die Skripts können nicht neu geladen werden laufe auf das gleiche Problem wie jetzt.

Answer 1

Read here für eine nette Präsentation über jQuery's Event Delegation.

Nach dem oben Blick auf diese zu lesen:

// using jQuery 1.4.2 
(function($){ 
    // You can cache the container you plan on using for event delegation. 
    // If using $(document).ready(...) to call the below functions 
    //  your "container" element should already exist in the DOM 
    // (the .specialAjaxLink elements don't have to exist yet). 
    var container = $("#container"); 

    // whenever an element with the class "specialAjaxLink" is clicked 
    // while inside your container element execute the handler on them. 
    container.delegate(".specialAjaxLink", "click", function(){ 
     // do something amazing... 
     solveWorldHunger(this); 
     // stop propagation and prevent default... 
     return false; 
    }); 
}(jQuery)); 

Sie sollten sich nicht um Performance-Probleme kümmern, wenn das obige Verfahren verwenden, wenn Sie eine App so komplex wie gmail, Dokumente erstellen oder Google Wave .

Answer 2

ich immer, in der Regel rufen unbind() vor bind()

Answer 3

Statt .live der Verwendung von(), sollten Sie stattdessen Ereignis Delegation mit. Achten Sie auf ein Ereignis in einem Container, und überprüfen Sie dann das Tag und die Attribute, um zu entscheiden, wie es gehandhabt werden soll.

Viel effizienter, wenn Sie dem DOM einige Elemente hinzufügen.