✔ per ajax generierter content -> neue id ansprechen

[lehanky]

Hi Leute!

Bin gerade dabei zu versuchen, per jquery click event, Inhalt eines php files durch ajax zu laden. Dies funktioniert soweit auch so wie ich mir das vorgestellt habe, jetzt habe ich allerdings das Problem, dass ich, in meinem php file, welches so aussieht:

<?php

echo 
' 
<div id="back"> back </div>
<ul style="list-style-type:none"> 
			<li> test1></li>
			<li> test1></li>
			<li> test1></li>			
			<li> test1></li>
			<li> test1></li>
			<li> test1></li>			
			<li> test1></li>
			<li> test1></li>
			</ul>
';

?>

... ein <div> mit der id="back" erstellt habe. Jetzt versuche ich in meinem jquery file, im document ready teil auf die back - id zuzugreifen. Aber jquery erkennt das irgendwie nicht.

Also nochma kurz zusammengefasst: 1. Click Event: neues div wird geladen und fährt ins bild ( per jquery animate )
2. Click Event: neu generiertes div Element mit id="back" soll wieder aus dem Bild fahren, jedoch spricht jquery nicht auf $('#back').click(function(){...}.


Hier noch mein jquery file:

/
$(document).ready(function() {

	$('li').click(function() {

		$('.button_active').removeClass('button_active');
		$(this).addClass('button_active');
		doIt();
		$('div#slide').animate( {
			left : "-100%"

		}, 3000);

		$('div#slideIn').animate( {
			left : "0%"

		}

		, 3000);

	});

	$('#back').click(function() {

		$('.button_active').removeClass('button_active');
		$(this).addClass('button_active');

		$('div#slide').animate( {
			left : "0%"

		}, 3000);

		$('div#slideIn').animate( {

			left : "100%"

		}

		, 3000);

	});

});

function doIt() {
	alert('huuh');
	//erstellen des requests
	var req = null;

	try {
		req = new XMLHttpRequest();
	} catch (ms) {
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (nonms) {
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (failed) {
				req = null;
			}
		}
	}

	if (req == null)
		alert("Error creating request object!");

	//anfrage erstellen (GET, url ist localhost,
	//request ist asynchron      
	req.open("GET", 'http://bspurl/bla.php', true);

	//Beim abschliessen des request wird diese Funktion ausgeführt
	req.onreadystatechange = function() {
		switch (req.readyState) {
		case 4:
			if (req.status != 200) {
				alert("Fehler:" + req.status);
			} else {

				//schreibe die antwort in den div container mit der id  
				document.getElementById('slideIn').innerHTML = '<strong>' + req.responseText + '</strong>';
			}
			break;

		default:
			return false;
			break;
		}
	};

	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	req.send(null);
}

edit: hab in der zwischenzeit mal versucht das "zurück Fahren" in ne extra Funktion auszulagern die ich direkt nach dem 2. animate der 1. click Funktion aufrufe.
Das Widerum funktioniert _nur_ _ausschließlich_ dann, wenn ich als erste Zeile der back() funktionen nen alert raushau. Ohne den Alert fährt es nicht wieder zurück.. weiß jemand womit das zusammenhängt

Vielen Dank im Voraus!!

 

[Quaese]

Hi,

da das Element mit der ID back noch nicht existiert, wenn du den Event registrierst, muss er zur Laufzeit an das Element gebunden werden. Für solche Fälle stellt jQuery seit der Version 1.3 die Methode live zur Verfügung.

Beispiel:

$('#back').live("click", function() {
  $('.button_active').removeClass('button_active');
  $(this).addClass('button_active');

  // Sonstige Anweisungen
});

Ciao
Quaese

 

[lehanky]

vielen Dank für deine schnelle Antwort, habs grad probiert und es hat funktioniert!! top!