JQuery: on()-Funktion richtig benutzen?

[Trash]

moin,
ich habe aktuell 2 DIV Boxen auf meiner Seite, die dynamisch mit Content befüllt werden.

Das Menü in der einen DIV-Box kommt aus der Datenbank und per Click auf einen der Links dort soll per JQuery etwas in dem anderen Div passieren. Da der Inhalt des Menüs dynamisch aus der DB befüllt werden, kann ich ja nicht per JQuery dynamisch Funktionen generieren lassen - je nach DB Ergebnis.

Deswegen möchte ich definieren, dass per Click auf einen der Links im Menü ein Loader angesprochen wird, der dann je nach Selektion den Inhalt in das andere DIV lädt.

Ich bin nun auf on() von JQuery gestoßen und dachte, dass dies mein Problem löst.

Meine Struktur sieht folgendermaßen aus:

<div id="nav">
<ul class="list_menu">
    <li><a id="link_1">blabla</a></li>
    <li><a id="link_2">blabla2</a></li>
</ul>
</div>

Wenn ich nun eine Testfunktion baue, die so aussieht:

	$("#nav").on("click", function(){
			alert($(this).attr('id'));
		});

Dann funktioniert das auch und die Alert-Box erscheint. Allerdings weiß ich jetzt nicht, was der User genau angeklickt hat. Ich dachte ich kann das hiermit ändern:

	$("#nav .list_menu a").on("click", function(){
			alert($(this).attr('id'));
		});

Die Alert-Box erscheint aber nicht. Ich dachte, dass ich es so definieren kann, dass der Handler eben nur für die Links im Menü gelten.

Weiß jemand wie das geht?

Danke!

 

[Trash]

Oder liegt es daran, dass es nicht funktioniert, weil die Jquery-Funktion geladen wird und das Menü aus der DB erst "später" geladen wird? Kann man das irgendwie "umgehen"?

 

[CPoly]

Oder liegt es daran, dass es nicht funktioniert, weil die Jquery-Funktion geladen wird und das Menü aus der DB erst "später" geladen wird? Kann man das irgendwie "umgehen"?

Genau daran liegt es, weil der Selektor wählt die Elemente ja einmalig aus. Aber on() hat auch hier eine Lösung für dich.

$("#nav").on("click", ".list_menu a", function(){
    alert(this.id);
});

Oder für jQuery vor 1.7

$("#nav").delegate(".list_menu a", "click", function(){
	alert(this.id);
});