jquery中li元素的click事件为何不起作用

Question

html代码:    
 <div class="searchContainer">
     <input type="text" name="txtSearch" class="search_text"/>  
     <a href="#"><img src="Images/Small_pic/08.gif" style="border:1px solid #ccc" /></a>
     <div class="completionList">
        <ul>  <!--用于显示搜索关键字列表-->                      
        </ul>
     </div>         
 </div>     
  
jquery代码：
$(function () {
   $("input:text").keyup(function () {
         $("div.completionList ul").append("<li>animal</li>")
   });
   $("div.completionList ul li").click(function () {
          alert("ok");
    });
})但是当写成:
$(function () {
   $("div.completionList ul").append("<li>animal</li>");   $(".completionList ul li").click(function () {
          alert("ok");
    });
})
这样的代码就没问题, 前一个代码就有问题, 显示不出ok本来是想实现一个类似autoComplete下拉菜单关键字搜索功能，当取得数据的时候便添加一个li元素到ul当中,但是li元素的click 事件不起作用, 点击它的时候总出不来alert 提示，不知道是哪里出了问题? 

Answer 1

动态添加的元素不能想你那样绑定事件(原因我也搞不懂)！你要对添加的元素绑定事件可以这样:
$("div.completionList ul").append("<li onclick='a()'>animal</li>");
试一下吧
 

Answer 2

http://blog.csdn.net/xinhaozheng/article/details/5862109 $("div.completionList ul li").live('click',function () {
                alert("ok");
            });