✔ Problem mit jQuery / Thickbox

J

johnny_dub

Grünschnabel
Hallo,

ich habe ein Problem beim Zusammenspiel von jQuery und der Thickbox.

Ich habe die zwei Seiten "hauptseite.html" und "thickbox-jquery.html":
hauptseite.html
HTML: 
<html>
<head>
	<link rel="stylesheet" href="thickbox.css" type="text/css" media= screen
	<script src="jquery.js" type="text/javascript"></script>
	<script src="thickbox.js" type="text/javascript"></script>
</head>
<body>
	<a href="thickbox-jquery.html?height=220&width=400" class="thickbox">Test</a>
</body>
</html>
thickbox-jquery.html:
HTML: 
<html>
	<head>
	<script src="jquery.js"></script>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
				$("#details").toogle("slow");
			});
		});
	</script>
	</head>
	<body>
	<button>Test</button>
		<br>
	<div style="display:none" id="details">Test Test Test</div>
	</body>
</html>

Wenn ich auf den Button Test drücke soll halt die bis dahin versteckt div box details erscheinen. Das funktioniert auch, wenn ich die Seite direkt aufrufe einwandfrei. Erfolgt der Aufruf jedoch in der Thickbox passiert beim Klick auf den Button gar nix und auch die Fehlerkonsole des Firefox bleibt leer.
Könnt ihr mir verraten was ich falsch mache?

Danke!

Johannes
 
Hi,

mit dem Aufruf
Code: 
<a href="thickbox-jquery.html?height=220&width=400" class="thickbox">Test</a>
bindest du das Zieldokument als Inline-Content ein. Das hat zur Folge, dass es keinen onload-Event mehr gibt und damit dein Button keinen Ereignishandler zugewiesen bekommt.

Als Lösung könntest du den Scriptbereich ans Ende des Zeildokuments verschieben und die $(document).ready(...)-Teile entfernen.

Eine weitere Möglichkeit wäre, das Zieldokument "iframed" einzubinden. Dazu muss der Aufruflink wie folgt angepasst werden:
Code: 
<a href="thickbox-jquery.html?KeepThis=true&TB_iframe=true&height=220&width=400" class="thickbox">Test</a>

Ciao
Quaese
 
Moin,

desweiteren hat sich hier offensichtlich ein Tippfehler eingeschlichen:
Code: 
	<script>
		$(document).ready(function(){
			$("button").click(function(){
				$("#details").toogle("slow"); // heißt 'toggle'
			});
		});
	</script>


mfg Maik
 
Danke für die schnellen Antworten.
Es funktioniert beides wunderbar. Der Tippfehler hatte sich beim erstellen der Testdateien eingeschlichen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück