通过jQuery给<li>绑定点击事件

背景：有个需求需要js中实现li标签的事件绑定，li通过在ajax请求中动态添加，按照常理，使用jQuery，可以使用以下方法绑定点击事件：

$(function(){
  commonAjaxCall("url", {}, {},
   function(data) {
    if (!data) {
      return;
    }
    var  li= '<li><span>集群</span';
    $(".class").append(li);
   });
  $(".class").find("li").unbind("click").bind("click",function(){
    alert("success");
  });
});

但使用此方法为<li>绑定事件时无效。

 

分析：若直接在html中使用js拼接元素时，通过以上事件绑定方法能够实现点击事件，但在Ajax中拼接时不行。Ajax为异步方法，未执行完拼接就执行绑定，

此时元素未找到，故事件绑定失败。

 

解决：使用以下方法绑定，可以实现事件绑定。

  $(".class").find("li").unbind("click").live("click",function(){
    alert("success");
  });

 

原理：通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素，或在绑定时元素未添加上）。

jQuery事件可参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp