Kann HTML Elemente in Javascript geladenem Content nicht ansprechen

[diggity]

Hallo Leute,

Auf meiner Seite lade ich mittels Javascript Inhalte herein. Nun habe ich das Problem dass ich in diesem dynamisch geladenen Inhalt nicht mehr mit Javascript auf den hereingeladenen Content bzw dessen HTML Elemente zugreifen kann.

Ein Beispiel des hereingeladenen Codes:

<script type="text/javascript"> 
	$(document).ready(function() {
		$("div#test").css("visibility", "hidden");
	});		
</script>
<div id="test">test</div>

Das soll nur veranschaulichen auf was ich hinaus will. Ich bekomm keinerlei JS Errors, es passiert einfach nichts.
Wenn ich mir mit alert($("div#test").html()) den Inhalt des Divs ausgeben lasse, bekomm ich "null" zurück.

Gibts da irgend eine Möglichkeit wie man das umgehen bzw lösen kann? Es liegt doch daran dass dieser Quelltext nicht direkt im Dokument steht sondern erst nachher hereingeladen wurde, oder täusche ich mich da?

 

[Sven Mintel]

Also wenn du den JS-Code dort auch nachträglich lädst, bringt dir das nichts.
ready() feuert beim onload des Dokumentes, und das war schätzungsweise bevor du den JS-Code hereingeladen hast.

 

[diggity]

Diese Vermutung hatte ich am Anfang auch, doch wenn ich das JS im statischen Quelltext der Seite platziere, funktionierts auch nicht.

 

[Sven Mintel]

Auch dann feuert onload zu früh, weil das <div> erst später vorhanden sein wird.

 

[diggity]

Stimmt
Gibts für sowas irgend eine Lösung?

 

[Sven Mintel]

Hast du es schon mal so probiert?:

<div id="test">test</div>
<script type="text/javascript"> 
		$("div#test").css("visibility", "hidden");
</script>

Wenn du das <div> vor dem Skript platzierst, welches darauf zugreift, brauchst du nicht auf den onload-Event warten.
Ein Dokument wird von oben nach unten abgearbeitet, somit weisst du dann ja, dass das <div> schon da ist.

 

[diggity]

Genial... es funktioniert tatsächlich wenn man's drunter schreibt.

Beispiel:

{section name=item loop=$messages}			
	<div id="message_{$messages[item].id}" class="msg dropaccept">
		<span class="check"><input class="checkbox" type="checkbox" name="check[{$messages[item].id}]" /></span>
		<span class="icon">Icon</span>
		<span class="sender"><a href="{make_url module=vcard user=`$messages[item].sender_name`}">{$messages[item].sender_name}</a></span>
        <span class="drag">&nbsp;</span>
		<span class="subject">{$messages[item].subject|truncate:45}</span>
		<span class="date">{$messages[item].timestmp|date_format:"%d.%m.%Y %H:%M"}</span>
		<p class="clear"></p>
	</div>	
	<script type="text/javascript">
		$(document).ready(function() {ldelim}		
			$("#message_{$messages[item].id}").Draggable({ldelim}				
				revert: true
			{rdelim});
		{rdelim});
	</script>
{/section}

Ohne dem ready() Event funktionierts nur im Firefox, im IE kommt da ein Fehler dass der Vorgang abgebrochen wurde... aber wenigstens funktionierts jetzt.
Danke dir!