[Jquery] Wiederholung von .show/.hide

Timdaroxxa · 25. März 2012

Hi,
hier erstmal der Code:

Code:

$("div.ref-box").click(function() {
	$("div#mid-wrapper").hide("slide", { direction: "left" }, 1000);
	setTimeout(function(){
		$('#mid-wrapper').load("ref/referenz.html", function(){
			$("div#mid-wrapper").show("slide", { direction: "up" }, 1000);
		});
	}, 1000);
});

und direkt danach

Code:

$("div#top-logo").click(function() {
	$("div#mid-wrapper").hide("slide", { direction: "left" }, 1000);
	setTimeout(function(){
		$('#mid-wrapper').load("portfolio.html", function(){
			$("div#mid-wrapper").show("slide", { direction: "up" }, 1000);
		});
	}, 1000);
});

Wenn ich nun #top-logo anklicke, dann passiert

Code:

$("div#mid-wrapper").hide("slide", { direction: "left" }, 1000);

zwei mal und

Code:

 $("div#mid-wrapper").show("slide", { direction: "up" }, 1000);

auch zweimal.

Das passiert aber nur, wenn ich beide Codeteile zusammen im Script lasse. Verwende ich nur das untere beispielsweise, so wiederholt sich nicht und alles läuft wie es sein soll.

Und jetzt noch eine zweite Frage: Ich verwende ich ja .load! Gibt es eine Möglichkeit die Einbindung von Scripts zu automatisieren? Das Problem ist ja, dass nach dem load vorgang neu geladene Elemente (z.B. divs) nicht mehr auf das Javascript ansprechen.

Gruß Tim

ManOki · 25. März 2012

wie sieht denn das html dazu aus? sicher, dass du nicht aus versehen doch beides auslöst?

neu geladene webseitenteile werden natürlich im javascript/dom hinterlegt, sonst würde es der browser garnicht anzeigen. ich vermute mal, du hast irgendwelche listener registriert und das nur einmalig beim ersten laden.

kleine hilfe/anleitung dazu: http://www.learningjquery.com/2008/05/working-with-events-part-2

mambokurt · 25. März 2012

Alloah, Guck dir mal dein HTML genauer an, ob du da nicht vielleicht eine Id doppelt vergeben hast, oder ob ref-box vielleicht Teilelement von top-logo ist oder so. Ansonsten würde ich mal in die beiden Funktionen ein alert() packen, um zu sehen, was da wann aufgerufen wird.

Zu Load: ich denke mal du meinst die Eventhandler auf die eingeladenen Elemente? Du kannst die .load Funktion abändern, so dass bei jedem .load eine weitere Funktion ausgeführt wird, die kannst du dann auf deine Divs loslassen, also quasi so eine Art init-Funktion, die du einmal beim onLoad aufrufst, und dann immer wenn Zeu nachgeladen wurde. ^^

Timdaroxxa · 25. März 2012

Hey,

also mein HTML ist einwandfrei...
Ich probier jetzt mal das mit den Alerts.

Was mir noch auffällt. Drücke ich das erstemal auf dastop-logo, wiederholt sich nichts. Beim 2.mal führts alles 2mal aus, beim dritten mal 3mal usw.!
@mambokurt: Kannst du mir ein Beispiel für so eine Funktion zeigen/verlinken?

Ergänzung (25. März 2012)

EDIT: Also es lag jetzt tatsächlich an dem Aufbau in der HTML-Struktur. Allerdings weis ich nicht, warum das Verhalten vorher so komisch war, denn eigentlich überschneidet sich da nichts.

Code:

<body>

<div id="header-wrapper">
	<div id="top-logo">
		<img src="img/layout/top-logo.png">
	</div>
</div>
<div id="mid-wrapper">
	<div id="ref-wrapper">
		<div class="ref-box">
			<img src="img/ref/ref-ref1.png" class="img-1">
			<div class="ref-box-cover">
				<img src="img/ref/ref-inxoomed.png" class="img-2">
			</div>
		</div>
		<div class="ref-box"><img src="img/ref/ref-ref2.png"></div>
		<div class="no-float"></div>
	</div>
	<div id="content-wrapper">
		<div class="content-box" id="box-1">
			<h3 class="titilliumtext22l_light">This is a Headline</h3>
			<span class="titilliumtext22l_light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
		</div>
		<div class="content-box" id="box-2">
			<h3 class="titilliumtext22l_light">This is a Headline</h3>
			<span class="titilliumtext22l_light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
		</div>
		<div class="content-box" id="box-3">
			<h3 class="titilliumtext22l_light">This is a Headline</h3>
			<span class="titilliumtext22l_light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
		</div>
	</div>
</div>



<script type="text/javascript" src="js/ref-hover.js"></script>

</body>

Wende ich statt top-logo den .click auf #box-2 an funktioniert alles bestens, auf allem anderen irgendwie nicht.

EDIT: ok Ich weis worans liegt. Immer wenn ich etwas geladen habe, hab ich erneut das Script mitgeladen, damit es weiterhin funktioniert. Allerdings wurde es dann dadurch auch mehrmals ausgeführt.
Also Muss das .load problem gelöst werden!

Suche

[Jquery] Wiederholung von .show/.hide

Timdaroxxa

Lieutenant

ManOki

Lt. Commander

mambokurt

Gast

Timdaroxxa

Lieutenant

Ähnliche Themen