给jQuery多次动态添加的元素添加事件

hyx 2019-03-29 12:17:04 183次 0

一般通过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['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]['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);
        }
    });


发表评论

注:*为必填

回复 的评论
*
选择
*
*