背景:有个需求需要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