Problem mit jQuery - Wert eines Listenelements bekommen

[msa1989]

Hallo,

ich verzweifle gerade an einem eigentlich einfachen Problem.
Ich arbeite momentan an einer Live Suche wie man sie von Google kennt.
Ich tippe also in mein Formularfeld irgendeinen Wert und in einem Dropdown sollen Suchvorschläge gemacht werden.
Die Seite baut auf Bootstrap auf. Der HTML-Code des Formularelements schaut so aus:

<div class="form-group">
 <label for="name">Name:</label>
 <input type="text" class="form-control" name="Name" id="Name">
 <div class="ShowResult" id="NameResult"></div></div>

In dem "<div class="ShowResult" id="NameResult"></div>" werden die Suchergebnisse von einer PHP Datei wie folg reingeladen:

<ul class="dropdown-menu">
 <li id="ID1">Ergebnis 1</li>
 <li id="ID2">Ergebnis 2</li>
 <li id="ID3">Ergebnis 3</li>
 <li id="ID4">Ergebnis 4</li>
 <li id="ID5">Ergebnis 5</li>
</ul>

Das ganze funktioniert auch wunderbar. Leider bekomme ich es aber einfach nicht hin,
dass ich mit einem Klick auf das Listenelement den Text bzw. die ID bekomme.
Also z.B. "Ergebnis 2" bzw. "ID2".
Meine Javascript zu der Auswertung des Listenelemnts schaut so aus:

<script>
$(function() {
  $("li").click(function() {
  var listval = $(this).html();
  alert(listval);
  });
});
</script>

Wenn ich Versuchssweise die Suchergebnisse statisch einfüge, also:

<div class="form-group">
 <label for="name">Name:</label>
 <input type="text" class="form-control" name="Name" id="Name">
 <div class="ShowResult" id="NameResult">
 <ul class="dropdown-menu" id="sonstiges">
 <li id="ID1">Reihe 1</li>
   <li id="ID2">Reihe 2</li>
   <li id="ID3">Reihe 3</li>
   <li id="ID4">Reihe 4</li>
   <li id="ID5">Reihe 5</li>
 </ul>
 </div>
</div>

dann funktioniert der Code, und ich bekomme was ich will
Wie muss ich jetzt den Code anpassen, dass es beim Live-Abruf funktioniert? Bin für jeden Tipp dankbar.
Viele Grüße
Michi

 

[Pixelaner]

Hey,

hilft dir das weiter?

 

[Duddle]

Ja, du bindest den click-Handler an alle <li>s beim Seitenaufruf, aber die <li>s der Suchanfrage werden erst später im DOM eingebunden, also nicht gebunden. Du musst also auch an neue Elemente den Handler binden.
Früher hat man das mit .live() gemacht, aber das wurde durch .delegate() ersetzt. Aus den Beispielen dort solltest du dir die korrekte Lösung ableiten können.


Duddle

 

[msa1989]

@Duddle
Vielen Dank für deine Antwort. Hat mir weitergeholfen. Mein Javascript-Code sieht jetzt so aus:

<script>
$( "body" ).delegate( "li", "click", function() {
  var listval = $(this).html();
  // tu was
});

@Pixelaner:
Vielen dank für deinen Link, aber der Link von Duddle war genau das, wonach ich gesucht hab.