|
|||
Nachgeladener Element
Hi,
ich bin noch recht frisch was JQuery betrifft und bin nun auf ein Problem gestossen was ich nach mehrstündigen Suchen noch nicht lösen konnte. Ich habe eine Seite auf der sind etliche Links mit denen ich per JQuery ein DIV mit einer nachgeladenen Seite befülle (Hauptmenü). Diese DIVs enthalten wiederum Links die zB. die Sortierung der Tabelle ändern sollen. Diese Elemente sind wie ich bereits durch Google herausgefunden habe beim laden der Seite nicht im DOM enthalten. Ich bin dann auf .live() (ich verwende jQuery 1.5 deshalb .live() und nicht .on()) gestossen mit dem ich die Elemente nachträglich einbinde. Dies verwende ich nun in der Seite welche nachträglich in das DIV geladen werden und die Links funktionieren. Das Problem das ich jetzt habe ist wenn ich im nachgeladenen Inhalt ein Element drücke hängt mir die .live()-Funktion den Handler immer wieder in den DOM Tree und beim erneuten anklicken wird er 2x dann 3x usw ausgeführt. Codeschnipsel aus dem nachgeladenen Inhalt (ein Klick auf den Link "Name" lädt den gleich Inhalt erneut in das DIV sortiert aber eine Tabelle um): Code:
<script type="text/javascript"> $("#headerName").live("click", function () { jQuery('#divBody').load('<zuladenderinhalt>'); return false; }); </script> <a id="headerName" href="">Name</a> Wie kriege ich das hin das der Handler von Elementen die nachgeladen werden mit .live() nur einmal eingebunden werden ? Ich habe unbind probiert was nicht funktionierte (eventuell mach ich das noch falsch). |
Sponsored Links |
|
|||
Du darfst das .live() natürlich nur einmal ausführen. Sonst wird die Funktion ja mehrfach "eingehängt" und dann nacheinander ausgeführt.
Der JS-Code darf in dem Fall also nicht in deinem per AJAX nachgeladenen HTML-Snippet stehen. Der Vorteil von .live() ist ja, dass du das schon ausführen kannst wenn die entsprechenden Elemente noch gar nicht vorhanden sind, also z.B. direkt im <head>. Gruß, Max |
Sponsored Links |
|
|||
Danke auf die (ansich einfache) Idee bin ich noch garnicht gekommen
Das würde aber bedeuten das bei einer komplexen Seite (bei mir 10 Hauptmenü Punkte mit jeweils einer Seite mit Tabellen die sortierbar sein sollen) recht viele Handler definiert werden müssten |
|
|||
Vielleicht kannst du das vereinheitlichen, damit nur ein Handler für jede Tabelle verwendet werden kann.
Alternativ setzt du einfach wieder auf .bind() und führst den entsprechenden Code jedes mal wieder aus, wenn sich der Seiteninhalt geändert hat. Das wäre m.E. sogar etwas eleganter. live() hat ja auch einige Nachteile (u.a. die Performance). Gruß, Max Geändert von Maxefix (26.03.2012 um 13:23 Uhr) |
|
|||
Mh... ich habe es auf bind() umgestellt und es klappt hervorragend... ich weis nicht was ich bei meinen ersten Versuchen heute Morgen falsch gemacht habe
Vielen Dank ich habe wieder eine Menge dazugelernt! |
|
|||
ich habe das selbe problem
bei mir ist der Fall ähnlich.
Ich möchte auch per load() Inhalte in immer andere #divs (sind eindeutig) nachladen. Lade ich einen Inhalt so blende ich die anderen Inhalte/Bereiche aus, bzw. lade die angeforderten Inhalte teilweise auch in verschiedene #divs zurück. Im letztgenannten Fall ergänzt sich die Navigation um weitere Punkte, die dann den Inhalt zeigen, wenn der User sie anfordert. Beim ersten Klick funktioniert alles super; aber dann wird von jQuery mitgezählt. Da bei meiner Anwendung sehr leicht, sehr viele Einstellungen vorgenommen werden können, erhöht sich deren Anzahl sukzessiv. (Auf der Seite kann man sortieren, mehrere Slider benutzen, Kurz-Präsentationen durch klicken.) Mein Ziel: Seitens der Anwendung soll man nun per load() in den dazugehörigen Dateien - laden/speichern/updaten. Das Problem! jQuery soll nur einmal ausführen. Ich brauch sauber Daten. Was mach ich falsch? hier der Code ... Code:
<script type="text/javascript"> $("#callSavePreference").bind("click", function(){ $('#priceRange').hide('fast'); $('#ratingInfo').hide('fast'); ... $('#savePreference').load('dateiPfad.php?ref=pollUI&L=de&productGroup=pdb_camera'); return false; }); <p id="callSavePreference">Speichern</p> <p id="usw.">usw.</p> </script> vielen Dank schon mal Grüße Michael |
|
|||
hi protonenbeschleuniger,
Ich weiß nicht, warum die Fkt. load() - im Laufe der Anwendung - bei nur einem Klick mehrmals "feuert". Beim ersten Aufruf/kLICK ist alles fein, aber dann ... Beispiel: Ich klicke das zweite Mal auf einen anderen Navigationspunkt (wird auch mit load() geladen), und schon feuert jQuery zwei Mal hintereinander, dann drei mal usw. - JqUERY soll aber nur einmal die Datei x durchlaufen. Hoffe es ist jetzt deutlicher geworden. Grüße Michael |
|
||||
Es wäre besser gewesen, wenn du einen neuen Thread eröffnet hättest, ich kann nicht erkennen inwieweit deine Problem mit dem vorherigen zusammenhängt. Das macht es für Helfer nur unnötig kompliziert den Thread erst durchlesen zu müssen, bis sie auf deine Frage stossen.
Dein Problem läßt sich aber nicht nachvollziehen. Dein Code ist so wie du uns ihn gezeigt hast fehlerhaft (HTML Code im JS Block). Und bist du sicher, dass du dem DIV einen onload Event verpassen möchtest? .load() – jQuery API Nachtrag: OK, das mit dem load() ist ein Problem der jquery API .load() – jQuery API sollte also funktionieren. |
Sponsored Links |
Stichwörter |
handler, jquery, live |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
position von Element an Element (rechts von Element) | britches | CSS | 1 | 18.05.2009 17:46 |
Festanstellung bei der Xing AG als Web Developer (HTML/CSS) | NEOX | Offtopic | 10 | 17.07.2008 17:11 |
[XHTML] HTML Kompatibilitätsrichtlinen 2.0a1 | gato | (X)HTML | 9 | 18.11.2007 12:28 |
Liste im IE | StarSt0rm | CSS | 3 | 22.08.2007 20:04 |
Validator Fehler und komm nicht drauf... | letslounge | (X)HTML | 3 | 14.09.2006 21:07 |