Question

我有以下HTML和Javascript代码。我正在尝试建立一个搜索建议系统。当用户在输入框'site_search'中键入并插入时，使用ajax动态检索无序列表'search_suggest'中的列表项。

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

Answer 2

您的脚本运行一次，将onclick操作绑定到不存在的<li>元素。您将需要在AJAX脚本中构建一些内容，以便在每个<li>元素添加到DOM时将其添加到onclick。

Answer 3

使用jQuery.live();

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

Answer 4

使用

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

这里输入标签是具有id earch_suggest
的ul的下一个兄弟 +是jQuery Next Sibling Selector

选择器“ul＃search_suggest＆gt; li”表示找到具有id搜索建议的ul子项的li。
>是jQuery Child Selector

Answer 5

将空的li或li添加到值中并像这样测试它 <ul id="search_suggest"> <li></li> </ul>

jquery .click函数没有被触发

5 个答案: