DOM neu laden !? jQuery mit neuen "Elementen"

dreamcatcher · 02.03.2011, 09:18

Guten Morgen

Es geht um:
Per Ajax hole bastel ich mir ein neues Seitenelement zusammen, welches einen Button enthält.
Dieser Button lässt das neu erstellte Element verschwinden.

Wenn ich die Seite neu lade klappt der Button auch, wenn ich ihn allerdings ausführen möchte nachdem ich ihn geaddet habe funktioniert er noch nicht.

Der Grund ist, dass die hide() Funktion nur funktioniert, sofern dieser aus dem DOM abgearbeitet wurde.

Da das DOM aber vor der Erstellung des neuen Elements geladen wurde, funktioniert dieses natürlich (noch) nicht (außer mit einem Seiten reload).

Was ich komisch fand war, dass mir google per "DOM neu laden jquery" keine wirklich guten Ergebnisse ausgab.

Was ich fand war das man Seiteninhalte laden kann... aber nicht wie ich die Funktionsfähigkeit eines neuen Elementes sicherstellen kann OHNE die >komplette< Seite neuladen zu müssen.

Weiß hier jemand wie dies funktioniert ?

Vielen Dank im voraus,

Dreamcatcher

Chriz · 02.03.2011, 10:40

Hallo,
zeig doch mal einen Codeschnipsel. Das hier ist mir auch noch nicht so ganz klar:

Zitat:

Der Grund ist, dass die hide() Funktion nur funktioniert, sofern dieser aus dem DOM abgearbeitet wurde.

dreamcatcher · 02.03.2011, 11:03

Zitat:

Zitat von Chriz

Hallo,
zeig doch mal einen Codeschnipsel. Das hier ist mir auch noch nicht so ganz klar:

Aber gerne doch

PHP-Code:

  vorher.html
<div>
</div>

nachher.html
<div>

<div class="xy">
<p><a class="hide">Hide Table</a></p>
<table><tbody>[...]</tbody></table>
</div>

</div>

js.js
$(document).ready(function() {
  $(".hide").click(function(){
    $(this).parent('p').next('table').hide();
  }
});

Und die js.js funktioniert ebend nur, wenn ich die Seite neu lade (und somit die js.js neu geladen wird).

Direkt nach der "Erstellung" (Mit $.post hole ich mir den Inhalt und gebe diesen auf vorher.html aus so dass nachher.html daraus wird) funktioniert der hide Button jedoch nicht.

Daher hatte ich überlegt die js.js irgendwie neu lesen zu lassen...

rudygotya · 02.03.2011, 11:21

Hast du dir die FAQ mal angesehen bzw. durchgearbeitet?

Das sind wirklich Grundlagen, bitte geb dir mehr Mühe / bring mehr Eigeninitiative mit.

grüße

Basti

Chriz · 02.03.2011, 12:54

Du möchtest doch - wenn ich dich richtig verstanden habe - eine Funktionalität einmal ausführen, wenn das Dokument geladen wurde und einmal, wenn du das Element dynamisch erzeugst hast. Das schreit doch nach einer Funktion!

Code:

js.js:

setzeKlickEvent = function() {
  $(".hide").bind("click", (function(){
    $(this).parent('p').next('table').hide();
  });
}

$(document).ready(function() {
  setzeKlickEvent();
});

// nach dem AJAX
setzeKlickEvent();

Evtl. unbind() vorher, bin nicht sicher ob du sonst mehrfach das onclick setzt.

phpdummi · 02.03.2011, 13:59

http://api.jquery.com/live/

Zitat:

Attach a handler to the event for all elements which match the current selector, now and in the future.

http://api.jquery.com/delegate/

Zitat:

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Wie der Dokumentation zu entnehmen, klemmt sich live() an das höchste Element im DOM Tree, während man bei delegate() selber entscheiden kann an welchem Element gelauscht wird.

dreamcatcher · 03.03.2011, 18:44

Zitat:

Zitat von rudygotya

FAQ
grüße

Basti

Danke danke danke, das ist super

Zitat:

Zitat von phpdummi

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Wie der Dokumentation zu entnehmen, klemmt sich live() an das höchste Element im DOM Tree, während man bei delegate() selber entscheiden kann an welchem Element gelauscht wird.

Genau das wars.

Mit live() hab ichs super hinbekommen.

@Chriz
Danke.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQuery und blättern von content	jackie1983	JavaScript, Ajax und mehr	10	24.02.2011 22:30
Eingebundenes Plugin nach DOM Erstellung laden	dreamcatcher	JavaScript, Ajax und mehr	1	24.02.2011 08:39
JQUERY: 5 Bilder anzeigen, dann ausblenden und dann die nächsten laden?	sturmi	JavaScript, Ajax und mehr	5	30.01.2011 19:24
nur ausgewählten div Container neu laden - jQuery .load() - Hilfe	falby02	JavaScript, Ajax und mehr	2	11.11.2010 20:16
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
neuen Datensatz in der gleichen Seite laden	saki81	PHP Tipps 2010	5	17.04.2010 17:53
[Erledigt] Popup soll parent mit einer neuen Adresse laden	*tisc*	HTML, Usability und Barrierefreiheit	4	27.05.2009 18:02
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
Forum selber machen - Problem mit neuen Beiträgen		PHP Tipps 2006	2	01.04.2006 20:52
Frame schließen und DOM neu laden !? jQuery mit neuen "Elementen"	workaholic	HTML, Usability und Barrierefreiheit	2	06.09.2005 13:36
Bestimmte Dateien am Anfang der Seite laden		HTML, Usability und Barrierefreiheit	8	10.07.2005 22:30

02.03.2011, 09:18
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	DOM neu laden !? jQuery mit neuen "Elementen" Guten Morgen Es geht um: Per Ajax hole bastel ich mir ein neues Seitenelement zusammen, welches einen Button enthält. Dieser Button lässt das neu erstellte Element verschwinden. Wenn ich die Seite neu lade klappt der Button auch, wenn ich ihn allerdings ausführen möchte nachdem ich ihn geaddet habe funktioniert er noch nicht. Der Grund ist, dass die hide() Funktion nur funktioniert, sofern dieser aus dem DOM abgearbeitet wurde. Da das DOM aber vor der Erstellung des neuen Elements geladen wurde, funktioniert dieses natürlich (noch) nicht (außer mit einem Seiten reload). Was ich komisch fand war, dass mir google per "DOM neu laden jquery" keine wirklich guten Ergebnisse ausgab. Was ich fand war das man Seiteninhalte laden kann... aber nicht wie ich die Funktionsfähigkeit eines neuen Elementes sicherstellen kann OHNE die >komplette< Seite neuladen zu müssen. Weiß hier jemand wie dies funktioniert ? Vielen Dank im voraus, Dreamcatcher


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.03.2011, 11:21
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Hast du dir die FAQ mal angesehen bzw. durchgearbeitet? Das sind wirklich Grundlagen, bitte geb dir mehr Mühe / bring mehr Eigeninitiative mit. grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

02.03.2011, 12:54
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Du möchtest doch - wenn ich dich richtig verstanden habe - eine Funktionalität einmal ausführen, wenn das Dokument geladen wurde und einmal, wenn du das Element dynamisch erzeugst hast. Das schreit doch nach einer Funktion! Code: js.js: setzeKlickEvent = function() { $(".hide").bind("click", (function(){ $(this).parent('p').next('table').hide(); }); } $(document).ready(function() { setzeKlickEvent(); }); // nach dem AJAX setzeKlickEvent(); Evtl. unbind() vorher, bin nicht sicher ob du sonst mehrfach das onclick setzt. __________________ "Nuschel ich?" - "Was?"