jQuery Funktionen und Skripte auf nachgeladenen Content anwenden

leicht-debil

Neu angemeldet
Registriert
13 Aug. 2013
Beiträge
57
Ort
Kassel
Servus, ich schon wieder :T

Also irgendwie habe ich noch nicht ganz verstanden, wie man dafür sorgt, dass Javascripte/jQuery-Skripte, die via ".load()" nachgeladen wurden, Anwendung finden.
Hier man ein Beispiel, ich hoffe mein Anliegen ist verständlich.

index.html:
[src=html5]<html>
<head>
</head>
<body>
<div id="foobar1" class="bar">Foo1</div>
<div id="foobar2" class="nobar" onclick="$.irgendwasladen()">Foo2</div>
<div id="foobar3" class="bar">Foo3</div>
<!-- Hier jQuery-Framework -->
<script>
$( ".bar" ).click(function() {
alert("Du hast ein Element mit der Klasse bar geklickt!");
});
$.irgendwasladen = function(query) {
$("#foo2").load("neuerinhalt.html");
}
</script>
</body>
</html>
[/src]

neuerinhalt.html
[src=html5]<div id="new">
<div id="foo2" onclick="$.irgendwasladen()">Hier kannst Du wieder klicken und neu laden!</div>
<div id="foo5" class="bar">Hier kannst Du klicken, um einen Alert zu erzeugen</div>
</div>[/src]

Klickt man in der index.html auf ein Element mit der Klasse "bar", wird der entsprechende Alert ausgegeben.
Klickt man in der index.html auf das Element mit der ID "foo2", wird die Funktion "irgendwasladen" aufgerufen und der Inhalt der Datei "neuerinhalt.html" in den Container "#foo2" geladen.
Soweit alles ok.
Allerdings greifen beim nachgeladenen Inhalt die JS-Funktionen nicht mehr. Wie kann ich bewirken, dass die in der "index.html" gesetzten Skripte auch bei dem nachgeladenen Inhalt "feuern"?
 
Das ist über Delegates möglich, welche in aktuellen jQuery-Versionen genau wie beliebige andere Event-Handler über die [kw]on()[/kw]-Methode gebunden werden können; siehe auch .

In deinem Beispiel:
[src=javascript]$('body').on('click', '.bar', function() {
alert('click handler called');
});[/src]
 
Zurück
Oben