给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
"; return html; } "+ "
"+ 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+="
在评论列表内有四个事件需要绑定,回复,查看回复的评论,点赞,踩
而这四个事件通过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); } });