auswahl von html() erzeugten ausgabe.

[ToshiOzumi]

Guten Tag,

ich habe schon wieder ein Problem durch .html() erzeugte Ausgabe auszuwählen.

Ich schreib gerade eine autocomplete Suchfunktion. Suchbegriff wird per Ajax an PHP-Skript übergeben, der dann die Datenbank durchsucht und innerhalb eines div eine Liste schreibt. Die Ausgabe soll dann per Klick ausgewählt werden und in Suchfeld eingetragen.

Das Suchen und in die Liste ausgeben funktioniert ganz gut nur kann ich dann nicht drauf klicken um es auszuwählen. Leider finde ich aber auch keinen Fehler.

Also dann hier ist der Code.

<div class="invoice_field">
                <label>Nr.:</label>
                <input id="name" name="recipient_contact" type="text">
            </div> 
            <div id="contacthelp"></div>

$(document).ready(function(){
	$('#name').keydown(function(){
	if($('#name').val().length>=3)
	{
		var eingabe = {contact: $("#name").val()};
		$.ajax({url:"/autocomplete/mycontact", data:eingabe, method:"POST"}).done(function(ausgabe){
//			alert(ausgabe);
			
			$("#contacthelp").html(ausgabe);
		})
	}
	});
});
$('#contacthelp p').click(function () {
	alert ($(this).text());
	$('#name').val(($(this).text()));
});

<?php

foreach($data as $ausgabe)
{
	echo ('<p>'.$ausgabe['contact_name'].'</p>');
}

und hier ist noch kurz die ausgabe.

<div class="invoice_field">
                <label>Nr.:</label>
                <input id="name" name="recipient_contact"
                 type="text">
            </div> 
            <div id="contacthelp"><p>XYZ AG</p></div>

wenn ich in der HTML Datei selbst <p>XYZ AG</p> reinschreibe funktionoiert das Einsetzen. Wenn es über die Ausgabe geschieht geht nicht.

[dedlfix]

Tach!

Das Suchen und in die Liste ausgeben funktioniert ganz gut nur kann ich dann nicht drauf klicken um es auszuwählen. Leider finde ich aber auch keinen Fehler.

Wie weit bist du mit dem Debugging? Welche Erkenntnisse hast du bereits daraus gezogen? Beispielsweise wäre da die Frage, ob der Event-Handler überhaupt beim Click-Event aufgerufen wird. Also öffne die im Browser eingebauten Entwicklerwerkzeuge und setz einen Breakpoint in den Event-Handler. Danach sehen wir weiter.

wenn ich in der HTML Datei selbst <p>XYZ AG</p> reinschreibe funktionoiert das Einsetzen. Wenn es über die Ausgabe geschieht geht nicht.

Vergleich auch mal dein obiges Ergebnis mit dem Ergebnis in diesem Fall.

dedlfix.

[ToshiOzumi]

Hallo,

Debugging im Browser nutze ich so wie so. Also Clickevent wird ausgelöst wenn ich im Code selber die Ausgabe reinschreibe und wird nicht wenn die Ausgabe durch den Script erfolgt.

In beiden Fällen habe ich nichts am JS geändert gehabt. Also theoretisch musste es an der Ausgabe liegen, aber ich sehe in der Schleife keinen Fehler. Insbesondere weil das Suchergebnis präsentiert wird.

Also der Clickevent wird nicht nur ausgelöst sondern macht auch das was er soll.

[dedlfix]

Tach!

Debugging im Browser nutze ich so wie so. Also Clickevent wird ausgelöst wenn ich im Code selber die Ausgabe reinschreibe und wird nicht wenn die Ausgabe durch den Script erfolgt.

Schaun wir mal. Wenn im HTML das Element bereits enthalten ist, kommt dein DOM-Ready-Event-Handler und darin findet sich diese Zeile

$('#contacthelp p').click(...

jQuery sucht sich damit alle passenden Elemente und weist ihnen den Click-Handler zu.

Also theoretisch musste es an der Ausgabe liegen, aber ich sehe in der Schleife keinen Fehler. Insbesondere weil das Suchergebnis präsentiert wird.

Dein Ajax-Aufruf kommt also zurück und fügt neue Elemente ins DOM ein. DOM-Ready ist schon lange vorbei und wird auch nicht erneut ausgelöst.

Also der Clickevent wird nicht nur ausgelöst sondern macht auch das was er soll.

Aber er ist den neuen Elementen nicht zugewiesen worden. Ein $('selector') selektiert nur die aktuell vorhandenen Elemente, jQuery macht das nicht für irgendwelche zukünftigen.

Du kannst das Problem auf zwei Arten lösen. Eventhandler händisch an die neuen Elemente anhängen oder Eventhandler an ein gemeinsames Vorfahrenelement hängen. Das Event blubbert (englisch: bubble) die Vorfahrenkette entlang, wenn das nicht von einem Eventhandler unterbunden wurde. Das eigentlich geklickte Element findest du im event-Objekt in der Eigenschaft target. Siehe auch jQuery-Dokumentation event.target.

dedlfix.

[ToshiOzumi]

Aber er ist den neuen Elementen nicht zugewiesen worden. Ein $('selector') selektiert nur die aktuell vorhandenen Elemente, jQuery macht das nicht für irgendwelche zukünftigen.

Du kannst das Problem auf zwei Arten lösen. Eventhandler händisch an die neuen Elemente anhängen oder Eventhandler an ein gemeinsames Vorfahrenelement hängen. Das Event blubbert (englisch: bubble) die Vorfahrenkette entlang, wenn das nicht von einem Eventhandler unterbunden wurde. Das eigentlich geklickte Element findest du im event-Objekt in der Eigenschaft target. Siehe auch jQuery-Dokumentation event.target.

Ok. Verstanden. Händisch dranhängen finde ich nicht so schön.

ich versuche mal von dem Vorfahrenelement weiterzugehen. Danke dir.