为动态添加的元素绑定事件-JQuery

在使用jquery的方式为元素绑定事件时，bind或者click都OK,但这只能为页面已经加载好的元素绑定事件。如果用ajax的方式请求远程数据来动态添加页面元素时，以上绑定事件的方式是无效的

$("#box ul li").bind("click",data,function(){  
    $(this) .......
});  
$("#box ul li").click(function(){  
    $(this) ..........
});  

为动态添加的元素绑定事件有以下几种方式：

1,delegate()：向匹配元素的当前或未来的子元素附加一个或多个事件处理器

$(selector).delegate(childSelector,event,data,function)

// .bt-check-olstatus 是ajax动态生成的元素
$(".dataTables-example").delegate("td .bt-check-olstatus","click",function(){ 
                ..............
});

2.live()：为当前或未来的匹配元素添加一个或多个事件处理器

$(selector).live(event,data,function)

jquery1.8版本以前推荐使用该方法；1.8版本之后就不建议使用了，所以高版本的jquery推荐使用on()方法绑定事件。

$("#box ul li").live("click",function(){  
     ...........
}); 

3.on()：适用于当前及未来的元素（比如由脚本创建的新元素）

$(selector).on(event,childSelector,data,function,map)

$("#box").on("click","ul li",function(){  
    ...............
});  

4.onclick事件：动态添加数据时，就为元素绑定onclick事件

 $.ajax({  
        type:"POST",  
        url:"#",  
        data:{},  
        dataType:"JSONP",  
        success:function(data){    
              var html = '';         
              var list = data.result;  
               for(var i = 0; i < list.length; i++){  
                   html+='<li> 
                    + '<span onclick="showSource(this);"></span>'
                    + '</li>';  
               }           
          }  
    });
    function showSource(event){
        ........
    }