DOM neu laden !? jQuery mit neuen "Elementen"

[Forumsgast]

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

[Forumsgast]

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

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

[Forumsgast]

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

Aber gerne doch

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...

[Forumsgast]

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

[Forumsgast]

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!

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.

[Forumsgast]

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

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

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

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.

[Forumsgast]

FAQ
grüße


Basti

Danke danke danke, das ist super

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.