javascript - 点击“回复”按钮，第二次点击“回复”会插入多条数据？

问题描述

问 题

在线功能演示地址(手机端)：http://bbs2.valueonline.cn/we...
完整项目代码下载：http://pan.baidu.com/s/1bpDznhP

以下按钮点击回复第二次的时候会插入多条数据，求大神指点为什么？

主要js代码

<script type="text/javascript">
     var onOff=true;
//收缩二级评论
$(".btnReportNum").click(function(){
    var id=$(this).attr("data-id");
    var id2="reportBox"+id;
    if(onOff){
        $("#id2").hide();
        onOff=false;
    }
    else{
        $("#id2").show();
        onOff=true;
    }
})
//文字长度限制，收缩
var showMore='<a href="javascript:" class="activeColor btnSS" data-onOff="true">展开说明</a>';
$(".detailTxt").each(function(){
    var startTxt=$(this).html();
    var length=$(this).html().length;
    var maxNum=76;
    if(length>maxNum){
        //过滤空格
        var newT=$.trim(startTxt).substring(0,maxNum)+"...";
        $(this).html(newT);
        $(this).after(showMore);
        //点击收缩内容；
        $(this).next().click(function(){
            var onOff=$(this).attr("data-onOff");
            if(onOff=="true"){
                $(this).prev().html(startTxt);
                $(this).html("收起");
                $(this).attr("data-onOff","false");
            }
            else{
                $(this).prev().html(newT);
                $(this).html("展开说明");
                $(this).attr("data-onOff","true");
            }
        })
    }
})

//切换回复面板；
$(".btnCannel").click(function(){
    $(".page2").hide();
    $(".page").show();
})

//点击后要获取-
//主贴（一级）的ID（post_id），跟贴（二级）的ID（id）,评论帖子（三级）的ID,回复用户的user_id,回复的内容(content)
//评论答案
var userUrl='information.html';  //登陆用户的个人主页链接
var imgAva="images/img.jpg";  //登陆用户的头像
var userName="tuihou";  //登陆用户的用户名
var floorName=10;  //一共有多个条跟帖

function showEdit(){
    $(".page2").show();
    $(".page").hide();
}

//评论一级回复
$(".btnReply1").click(function(){
    showEdit();
    $("textarea.anwerArea").focus();
    $(".btnSubmit").click(function(){
         var replyContent=$("textarea.anwerArea").val();
         var replyNum=parseInt($("#replyNum").html());
         var reply1='<div class="answerOne"> <div class="userRow"> <a href="'+userUrl+'"> <img src="'+imgAva+'" alt="" class="imgAva">'+userName+'</a> </div> <p class="pb15"> <span class="detailTxt">'+replyContent+'</span> </p> <p class="answerSmall"> <span class="mr10">'+(floorName+1)+'楼</span>刚刚 <a href="javascript:" class="btnReply2 btnReply" data-id="0">回复</a> </p> </div>';
         $("#content").append(reply1);
         $(".page2").hide();
         $(".page").show();
    })
})


//判断是否要加包裹层；
 var box='<div class="reportBox"> <img src="images/arrowsTop.png" alt="" class="arrowsTop"> <ul class="listReply2"> </ul> </div>';
//回复二级评论
$(".btnReply2").click(function(){
    showEdit();
    var temp="temp"+$(this).attr("data-id");
    $(this).addClass(temp);
    var temp='.'+temp;
    $(".btnSubmit").click(function(){
        var onOff=$(temp).parent().next().is(".reportBox");
        if(onOff){
        }
        else{
            $(temp).parent().after(box);
        }
        //获取要加的内容到ul中；
        var replyContent=$("textarea.anwerArea").val();
        var reply2='<li> <h4> <a href="'+userUrl+'">'+userName+'</a></h4><p class="reportTxt2">'+replyContent+'<span class="time">刚刚</span> <a class="time btnReply3" href="javascript:">回复</a> </p> </li>';
        $(".page2").hide();
        $(".page").show();
        $(temp).parent().next().find(".listReply2").append(reply2);
    })
})

</script>

解决方案

运行后解绑

//评论一级回复
$(".btnReply1").click(function(){

showEdit();
$("textarea.anwerArea").focus();
$(".btnSubmit").click(function(){
     var replyContent=$("textarea.anwerArea").val();
     alert(replyContent);
     var replyNum=parseInt($("#replyNum").html());
     var reply1='<div class="answerOne"> <div class="userRow"> <a href="'+userUrl+'"> <img src="'+imgAva+'" alt="" class="imgAva">'+userName+'</a> </div> <p class="pb15"> <span class="detailTxt">'+replyContent+'</span> </p> <p class="answerSmall"> <span class="mr10">'+(floorName+1)+'楼</span>刚刚 <a href="javascript:" class="btnReply2 btnReply" data-id="0">回复</a> </p> </div>';
     $("#content").append(reply1);
     $(".page2").hide();
     $(".page").show();
     $(".btnSubmit").unbind();//这里要解绑，否则会在第二次执行两次的
})

})

这篇关于javascript - 点击“回复”按钮，第二次点击“回复”会插入多条数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！