2010-12-31 22 views
0

私は次のHTMLとJavascriptコードを持っています。私は検索提案システムを作ろうとしています。順序付けられていないリスト 'search_suggest'のリスト項目は、ユーザーが入力ボックス 'site_search'に入力して挿入するときに、ajaxを使用して動的に取得されます。jquery .click関数がトリガーされない

<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のリスト項目をクリックすると、クリック機能が起動されません。どんな考え?

答えて

6

のクリックイベントをの後に追加する必要があります。

リスト項目がページに追加される前に、式$("ul#search_suggest>li")は何も検索されないため、要素はクリックイベントにバインドされません。

今、次のように将来

で、現在のセレクタに一致するすべての要素のイベントにハンドラをアタッチ:

をあなたは意志が .liveを使用する必要が

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

おかげのようにそれをテストです!出来た! – aakashbhowmick

0

jQuery.live();

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

あなたのスクリプトは1回実行され、存在しない<li>要素にonclickアクションをバインドします。あなたはDOMに追加されるときに各<li>要素にonclickを追加する何かをあなたのAJAXスクリプトに組み込む必要があります。

0

使用

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

ここで入力タグは、IDを使用してULの次の兄弟であるearch_suggest
+セレクタjQuery Next Sibling Selector

ある "UL#search_suggest>李" はリチウムを見つける手段ID検索のulの子です。
>jQuery Child Selector

0

がに値を空のLiまたはLiを追加し、この <ul id="search_suggest"> <li></li> </ul>

関連する問題