leicht-debil
Neu angemeldet
Servus, ich schon wieder
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"?
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"?