jQuery erkennt Element nicht (immer)

[tombe]

Hallo,

ich "spiele" gerade ein bisschen mit jQuery herum und bin auf ein komisches Problem gestossen.

Es gibt ein Textfeld und eine leere Liste. So bald man in das Textfeld etwas eingibt, soll eine Suche durchgeführt und die Liste mit den Treffern gefüllt werden (das klappt auch).

Wenn man auf die Liste klickt, soll dieser Eintrag in das Textfeld übernommen werden. Hier wird aber scheinbar die Liste nicht erkannt. Die Funktion wird nicht ausgelöst.

Klicke ich aber auf den Link, wird der in der Liste ausgewählte Eintrag übernommen. Wo ist hier mein (Denk)Fehler!?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("#suche").keyup(function() {
		$.post("search.php", { nachname : $(this).val() }, function(erg) {
			$("#div1").html(erg);
		});
	});

	$("#liste").click(function () {
		$("#suche").val($("#liste").val());
	});

	$("#link").click(function () {
		$("#suche").val($("#liste").val());
	});

});
</script>

<input type="text" name="suche" id="suche" value="" size="20" maxlength="50" />
<br />
<div id="div1">
    <select name="liste" id="liste" size="5" style="width: 150px;">
    </select>
</div>
<a href="#" id="link">Klick</a>

search.php:
Hier bitte den veralteten und fehleranfälligen Code nicht beachten. Es geht auf dieser Seite eigentlich nur darum das die Liste komplett neu erstellt wird.

<?php
$rs = mysql_connect("localhost", "xx", "xx");
mysql_select_db("test", $rs);

$sql = "SELECT DISTINCT nachname FROM adressen WHERE nachname LIKE '" .$_POST["nachname"] ."%' ORDER BY nachname";
$erg = mysql_query($sql);
?>
<select name="liste" id="liste" size="5" style="width: 150px;">
<?php
for ($a = 0; $a < mysql_num_rows($erg); $a++) {
    echo '<option value="' .mysql_result($erg, $a, "nachname") .'">' .mysql_result($erg, $a, "nachname") .'</option>';
}
?>
</select>

 

[Xervos]

Das Problem ist das bei "click()" das Event an die Elemente gebunden wird beim Aufbau, da diese noch nicht vorhanden sind ist das Event nicht angehängt und löst nicht aus.

Versuch es mal so

$("#div1 select option").live( "click", function( e ) {

               alert("Irgendwas");

} );

Schau dir auch dazu mal diese Seite an

http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

 

[CPoly]

Mit $("#div1").html(erg); löschst du das <select> element und fügst ein neues ein. Du solltest vom Server nur die <option> elemente senden.

 

[tombe]

Hallo Xervos,

danke für den Tipp. Funktioniert aber leider auch nicht und live ist wird auch als "veraltet" eingestuft.

Komisch ist ja das die Liste ist beim Laden der Seite bereits vorhanden. Sie wird nur zu Beginn leer erstellt und dann gegen die "volle" Lste ausgetauscht.

Habe jetzt aber eine Lösung gefunden wie man einen Eintrag aus de Lste auswählen kann:

$("#suche").keyup(function() {
	$.post("search.php", { nachname : $(this).val() }, function(erg) {
		$("#liste").empty();
		$("#liste").html(erg);
	});
});

Die Datei "search.php" liefert jetzt keine komplette Liste zurück sondern nur noch die option-Tags.

 

[jeipack]

Hi,
Versuchs mal so

$("#div1").on("click", "#liste", function () {
        $("#suche").val($("#liste").val());
    });

Bin grad bisschen kurz angebunden, konnte es deshalb nicht testen.

Edit/PS: ah du mast es jetzt schon anders. Ja wenn du nur noch die options zurück gibst funktioniert es auch. Das Problem war, dass das Objekt #liste an dem der Eventlistener hängte ja von dir überschrieben wird, es hat zwar noch die gleiche ID und alles, aber es ist ein neues Objekt und hat den Eventlistener nicht mehr.

Mit meiner Variante hättest du den Eventlistener ans div gebunden, dieser Listener hört aber trotzdem nur auf klicks auf #liste.