jquery .click Funktion nicht ausgelöst

Question

Ich habe den folgenden HTML- und Javascript-Code. Ich versuche ein Suchvorschlagssystem zu erstellen. Die List-Items in der ungeordneten Liste 'search_suggest' werden dynamisch mit Hilfe von ajax abgerufen, wenn der Benutzer in das Eingabefeld 'site_search' eingibt und einfügt.

<form name="search_site_form" method="get" action="search.php"> 
     <input id="site_search" name="q" class="search_input input" autocomplete="off" value="Search the site" type="text"/> 

    <ul id="search_suggest"> 
    </ul> 
    <input value=" " type="submit" class="search_submit"/> 
    <script type="text/javascript"> 
    <!-- 
     $("ul#search_suggest>li").click(function(){ 
     alert('123'); 
    }); 
    //--> 
    </script> 
</form> 

Das Klicken auf die Listenelemente in search_suggest löst jedoch nicht die Klickfunktion aus. Irgendeine Idee warum?

Answer 1

Sie müssen das Klickereignis an die Listenelemente nach binden, die der Seite hinzugefügt wurden.

Bevor Listenelemente auf der Seite hinzugefügt werden, wird der Ausdruck $("ul#search_suggest>li") nichts gefunden, sodass keine Elemente an das click-Ereignis gebunden werden.

Sie müssen .live verwenden, wird:

einen Handler auf das Ereignis für alle Elemente anbringen, die den aktuellen Selektor übereinstimmen, jetzt und in der Zukunft

wie folgt aus:

<script type="text/javascript"> 
<!-- 
    $("ul#search_suggest>li").live('click', function(){ 
    alert('123'); 
}); 
//--> 

Answer 2

verwenden die jQuery.live();

<script type="text/javascript"> 
    <!-- 
     $("ul#search_suggest>li").live('click', function(){ 
     alert('123'); 
    }); 
    //--> 
    </script> 

Answer 3

Ihr Skript wird einmal ausgeführt und bindet die Aktion onclick an nicht vorhandene Elemente <li>. Sie müssen in Ihr AJAX-Skript etwas einbauen, das den onclick zu jedem <li> Element hinzufügt, wenn sie dem DOM hinzugefügt werden.

Answer 4

Verwenden

$("ul#search_suggest+input").click(function(){ 
     alert('123'); 
    }); 

Hier ist der Input-Tag ist die nächste Geschwister eines ul mit id earch_suggest
+ ist die jQuery Next Sibling Selector

Der Selektor "ul # search_suggest> li" bezeichnet den li finden die ist das Kind der UL mit ID-Suche vorschlagen.
> ist die jQuery Child Selector

Answer 5

in leer li oder li mit Werten hinzufügen und wie dieser <ul id="search_suggest"> <li></li> </ul>