jquery .click функция не запускается

Question

У меня есть следующий код HTML и Javascript. Я пытаюсь создать систему поиска. Элементы списка в неупорядоченном списке «search_suggest» динамически извлекаются с помощью ajax, когда пользователь вводит в поле ввода «site_search» и вставлен.

<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> 

Однако, нажатие на элементы списка в search_suggest не вызывает функцию щелчка. Любая идея почему?

Answer 1

Вам необходимо привязать событие click к элементу списка после, они были добавлены на страницу.

Прежде, чем какие-либо элементы списка будут добавлены на страницу, выражение $("ul#search_suggest>li") ничего не найдет, поэтому никакие элементы не будут привязаны к событию click.

Вы должны использовать .live, которые:

Attach обработчик события для всех элементов, которые соответствуют текущему селектор, в настоящее время и в будущем

Как следующее:

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

Answer 2

использовать jQuery.live();

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

Answer 3

Ваш скрипт работает один раз, привязывая действие onclick к несуществующим элементам <li>. Вам нужно будет встроить в свой скрипт AJAX что-то, что добавит onclick к каждому элементу <li>, поскольку они добавлены в DOM.

Answer 4

Применение

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

Здесь входной тег следующий родственный с ул с идентификатором earch_suggest
+ является jQuery Next Sibling Selector

Селектор "уль # search_suggest> Li" означает найти Ли, который является дочерним элементом ul с предложением поиска id.
> является jQuery Child Selector

Answer 5

Добавить пустой Li или Li со значениями в и проверить его, как этот <ul id="search_suggest"> <li></li> </ul>