给jQuery多次动态添加的元素添加事件
一般通过DOM添加的元素调用绑定的事件时很多是调用不了的，需要在添加的时候绑定事件或者用live绑定事件，但live在 jQuery1.9+删除了这个方法。而有时多次添加元素时，也要多次绑定事件，如果是添加一样的标签元素，那么这个元素的事件还会执行多次。如下有几种办法可以解决后面的麻烦。
就拿本站的评论回复来做例子吧。
通过ajax获取文章评论，点击查看回复评论，也是ajax获取数据
/*列出评论*/
function comment_put_dom(data,sec_pl) {
var html="";
var len=data.length;
if(len===0){
$('.comment-list ul').append("
暂无评论
");
}
for (var i=0;i
![]()
"+
"
"+
val['nickname']+""+time+"
"+val['content']+
"
回复- "+val['comment_nums']+" "+val['thumbs_up']+
""+val['step']+
"
回复
";
if( sec_pl!==undefined && sec_pl!==''){
html+=second_comment_dom(sec_pl);
}
}
$('.comment-list ul').html(html);
//bindEven($('.comment-list ul'));
}
/*回复评论的渲染*/
function second_comment_dom(val) {
var html="
";
//console.log(val);
var len1=val.length;
for (var j=0; j
![]()
"+
"
"+
val[j]['nickname']+""+time+"
"+val[j]['content']+
"
回复- "+val[j]['comment_nums']+" "+val[j]['thumbs_up']+
""+val[j]['step']+
"
回复
";
/* if(val[j]['childid']!==''){
html+=second_comment_dom(val[j]['child']);
}*/
html+="";
}
html+="
";
return html;
}
在评论列表内有四个事件需要绑定，回复，查看回复的评论，点赞，踩
而这四个事件通过click或者bind直接跟对应标签绑定事件是无法执行的，那么如何绑定事件呢，下面有三种方法。
1、通过live方法绑定，这时的jQuery必须是1.9版本以下的
/*回复*/
$('.comment-list .comment_btn').live("click",function () {
replay($(this).data('id'),$(this).data('nickname'));
});
/*点赞*/
$('.spot .zan').live("click",function () {
spot(this,'','thumbs_up',"comment");
});
/*踩*/
$('.spot .cai').live("click",function () {
spot(this,'','step',"comment");
}); /*查看回复评论*/
$(".replay_list").live("click",function () {
if($(this).data("has_req") && $(this).find("i").text()>0){
$(this).parents("li:eq(0)").find(".sec_pl:eq(0)").slideToggle();
}else if(!$(this).data("has_req") && $(this).find("i").text()>0){
get_more_comment($(this).data('id'),this);
}
});
2、用on方法来替代live
$(document).on("click",".comment-list .comment_btn",function () {
replay($(this).data('id'),$(this).data('nickname'));
});
$(document).on("click",".spot .zan",function () {
spot(this,'','thumbs_up',"comment");
})
$(document).on("click",".spot .cai",function () {
spot(this,'','step',"comment");
})
$(document).on("click",".replay_list",function () {
if($(this).data("has_req") && $(this).find("i").text()>0){
$(this).parents("li:eq(0)").find(".sec_pl:eq(0)").slideToggle();
}else if(!$(this).data("has_req") && $(this).find("i").text()>0){
get_more_comment($(this).data('id'),this);
}
});
3、在添加时绑定事件，并且限制了标签范围
function comment_put_dom(data,sec_pl) {
var html="";
var len=data.length;
if(len===0){
$('.comment-list ul').append("
暂无评论
");
}
…………………………………………………此处省略
bindEven($('.comment-list ul'));
}
//获取回复评论
function get_more_comment(rid,obj) {
var data={};
data.action="list";
data.tid=cur_id;
data.tableid=1;
data.rid=rid;
if(typeof(page)!== "undefined"){
data.page=page;
}
$.post("/main/comment",data,function (rtn) {
if(rtn.status==2){
var render=second_comment_dom(rtn.data);//获取要渲染的内容
$(obj).data("has_req",true);
$(obj).parents("li:eq(0)").append(render);
bindEven($(obj).parents("li:eq(0)").find(".sec_pl"));
}
},'json');
}
function bindEven(obj) {
obj.find($('.comment-list .comment_btn')).bind("click",function () {
replay($(this).data('id'),$(this).data('nickname'));
});
obj.find($('.spot .zan')).bind("click",function () {
spot(this,'','thumbs_up',"comment");
});
obj.find($('.spot .cai')).bind("click",function () {
spot(this,'','step',"comment");
});
/*查看回复评论*/
obj.find($(".replay_list")).bind("click",function () {
if($(this).data("has_req") && $(this).find("i").text()>0){
$(this).parents("li:eq(0)").find(".sec_pl:eq(0)").slideToggle();
}else if(!$(this).data("has_req") && $(this).find("i").text()>0){
get_more_comment($(this).data('id'),this);
}
});
}
第二种方法更好，第三种的绑定了多次事件，并且找到对应的元素弄的很麻烦
4、追加一个方法：jQuery的delegate方法，跟方法1live一样可以捕获到通过js后来添加的标签的时间
/*回复*/
$('.comment-list .comment_btn').delegate("click",function () {
replay($(this).data('id'),$(this).data('nickname'));
});
/*点赞*/
$('.spot .zan').delegate("click",function () {
spot(this,'','thumbs_up',"comment");
});
/*踩*/
$('.spot .cai').delegate("click",function () {
spot(this,'','step',"comment");
});
/*查看回复评论*/
$(".replay_list").delegate("click",function () {
if($(this).data("has_req") && $(this).find("i").text()>0){
$(this).parents("li:eq(0)").find(".sec_pl:eq(0)").slideToggle();
}else if(!$(this).data("has_req") && $(this).find("i").text()>0){
get_more_comment($(this).data('id'),this);
}
});