Функция 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, который будет:

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

Подобно следующему:

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

Answer 2

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

Answer 3

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

Answer 4

Использовать

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

Здесь тег ввода - это следующий брат ul с идентификатором earch_suggest
+ - это jQuery Next Sibling Selector

Селектор "ul # search_suggest> li" означает найти li, который является дочерним по отношению к ul с предложением поиска по идентификатору.
> - это jQuery Child Selector

Answer 5

используйте jQuery.live ();

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