✔ [jQuery] dynamisch <div> tags einfügen

[axe van ecks]

Hallo,

auf Klick auf einen Link lasse ich mir ein <div> tag dynamisch in meine Seite einbinden. Wenn ich nun versuche auf diese Elemente zuzugreifen, passiert leider nichts. Wie kann ich es schaffen auf dynamisch erstellte HTML-Teile zuzugreifen?

Hier soweit der relevante Code:

ein <div> Block mit der id="photos" wird dynamisch erstellt. weiter unten versuche testweise die Bilder auszufaden aber sie verändern sich nicht.

(...)

.click( function(){ 
			var name = $(this).attr("name");

			$.get("getPictures.php", {folder: name}, function(html_code){
				$("#photos").remove();
				$("#photography").append(html_code);
			});		
		});
		
		$("#photos").hover(
			function(){$(this).fadeOut("slow");},
			function(){$(this).fadeIn();	}
		);

hier noch was in getPicture.php passiert:

<?php
$folder = $_GET['folder'];

$path = "./pictures/series/".$folder."/";

$html_code = "<div id=\"photos\">\n";
if ($handle = opendir($path)) {
	while (false !== ($file = readdir($handle))) {
 		    if ($file != "." && $file != ".." && is_file($path.$file)) {
				
				$dimensions = getimagesize($path.$file);
				
				$html_code = $html_code."<img src=\"".$path.$file."\" width=\"".$dimensions[0]*0.2."\" height=\"".$dimensions[1]*0.2."\"> &nbsp;";
			}
	}
}
$html_code = $html_code."\n </div>";

echo $html_code;

?>

 

[Sven Mintel]

Moin axe,

du hast ja zwischendurch die alten #photos entfernt....dein "Eventüberwachung" ist Objektgebunden, und nur weil das eingefügte die selbe ID hat, ist es nicht dasselbe.

Mögliche Workarounds:

1.

$("#photos").hover(
			function(){$(this).fadeOut("slow");},
			function(){$(this).fadeIn();	}
		);

Notiere das auch in der Callback-Funktion

...oder

verwende live()
(bei dieser Variante musst du allerdings mouseover/mouseout verwenden, hover() wird von live() nicht unterstützt)

 

[axe van ecks]

habs mit live gemacht und funktioniert soweit perfekt. Vielen Dank

 

[axe van ecks]

[jQuery] <div> neu erstellen und Objektreferenz speichern

Hallo,

ich wurde hier darauf hingewiesen, dass der Zugriff auf <div> tags objektgebunden ist.
Also wenn ich ein neues <div> tag erstelle, erstelle ich auch ein neues Objekt, wie kann ich darauf eine Referenz erhalten und die speichern bzw. wie dieses neue Objekt ansprechen?

Danke!

Edit:
So. auf SELFHTML bin ich fündig geworden. Darüber hinaus hatte ich noch ein Problem, dessen Lösung vielleicht noch jemandem hilft.

ich wollte dem <div> tag mit der id frame, die neu erstelle <div> (var newDiv = createElement("div") als Kind hinzufügen und habs über $("#frame").appendChild(newDiv) probiert. Hat nicht funktioniert aber: var f = getElementByID("frame") und f.appendChild(newDiv) funktioniert.