layui流加载,加载更多后，点击触发事件会触发两次，问题出在哪儿，求大佬解决方案 代码如下：
flow.load({
elem: '#comments',
isAuto: false,
end: '<div style="font-size: 16px;color: #999;margin-bottom: 50px">没有更多评论了</div>',
done: function (page, next) {
let lis = [""];
$.get('/getCommentsByQuestionId?questionId=' + question.id + '&page=' + page, function (res) {
if (res.code === 200) {
if (res.data === null) {
lis.push("<div style='font-size: 17px;text-align: center;font-weight: 300;margin: 20px 0;color: #999'>暂无评论，快来做第一个评论的人吧~</div>");
$(".layui-flow-more").hide();
} else {
let comments = res.data;
//需要单独对每个评论进行处理
layui.each(comments, function (index, item) {
//查询评论总数
let replyNum = 0;
$.ajax({
type: "get",
url: "/getReplyNum",
async: false,
data: {parentCommentId: item.cId},
success: function (res) {
replyNum = res.data; //获取评论总数
}
});
//查询每条评论的点赞信息
let likeNum = 0;
$.ajax({
type: "get",
url: "/getLikeCount",
async: false,
data: {commentId: item.cId},
success: function (res) {
likeNum = res.data;
}
});
if (item.info === null || item.info === "") {
item.info = " ";
}
//评论用户等级头衔
let score = item.rateScore;
let cla = "";
if (score < 5) {
cla = "layui-badge layui-bg-gray";
} else if (score >= 5 && score < 15) {
cla = "layui-badge layui-bg-blue";
} else if (score >= 15 && score < 50) {
cla = "layui-badge layui-bg-cyan";
} else if (score >= 50 && score < 200) {
cla = "layui-badge layui-bg-green";
} else if (score >= 200 && score < 500) {
cla = "layui-badge layui-bg-orange";
} else {
cla = "layui-badge";
}
let html = " <div class='comment-list'>\n" +
" <div class='comment-header'>\n" +
" <ul class='index-list'>\n" +
" <li>\n" +
" <a class='comment-avatar' href='/user/" + item.uid + "'>\n" +
" <img style='border-radius: 10px' width='45' height='45' src='" + item.avatar + "'>\n" +
" </a>\n" +
" <a class='comment-index-name' href='/user/" + item.uid + "'>" + item.uname + "</a>\n" +
" <span style='border-radius: 3px;float:left;margin-right: 10px;margin-top: 3px' class='" + cla + "'><i class='fa fa-trophy' aria-hidden='true'></i> " + item.rate + "</span><p style='margin-top: 4px'>" + item.info + "</p>\n" +
" </li>\n" +
" </ul>\n" +
" </div>\n" +
" <div class='comment-description'>" + item.comment + "</div>\n" +
" <div class='clearfix' style='margin-left: 56px;margin-bottom: 38px;'>\n" +
" <span class='text-color-999 pull-right'>" + item.time + "</span>\n" +
" <span class='operate' data-id='" + item.cId + "' comment-uname='" + item.uname + "'>\n" +
" <a class='agree'>\n" +
" <i data-placement='right' style='vertical-align: -5px' class='layui-icon layui-icon-praise' data-original-title='赞同回复'></i>\n" +
" <span class='count' style='font-size: 10px;vertical-align: -2px;'>" + likeNum + "</span>\n" +
" </a>\n" +
" </span>\n" +
" <span class='sub-comment'>\n" +
" <a class='add-sub-comment' data-click='" + (index + 1) + "' href='javascript:;'>" +
" <i class='layui-icon layui-icon-dialogue'></i> <span style='font-size: 11px; vertical-align: 2px;'>" + replyNum + "</span>\n" +
" </a></span>\n" +
" </div>";
replyNum = 0;
//查询这层楼有没有楼中楼回复，并拼接html
let replyHtml = addReplyComment(item.cId, index + 1, item.uname);
lis.push(html + replyHtml);
});
}
}
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.page);
//此处添加按钮操作
//点击评论框下的回复框弹出/收起回复内容
$(".add-sub-comment").click(function () {
$(this).parent(".sub-comment").parent(".clearfix").siblings(".sub-comment-box").toggle();
if ($(this).parent(".sub-comment").parent(".clearfix").siblings(".sub-comment-box").css("display" !== 'none')) {
//不为none就展示背景颜色
$(this).parent(".sub-comment").css("background-color", "#499ef3");
$(this).parent(".sub-comment").children("a").children("i").css("color", "#fff");
$(this).parent(".sub-comment").children("a").children("span").css("color", "#fff");
} else {
//为none
$(this).parent(".sub-comment").css("background-color", "#f5f5f5");
$(this).parent(".sub-comment").children("a").children("i").css("color", "#155faa");
$(this).parent(".sub-comment").children("a").children("span").css("color", "#155faa");
}
});
//遍历查询评论框
$(".sub-comment").each(function () {
let count = $(this).children(".add-sub-comment").children("span").html();
if (parseInt(count) === 0) {
$(this).css("background-color", "#f5f5f5");
} else {
$(this).css("background-color", "#499ef3");
$(this).children("a").children("i").css("color", "#fff");
$(this).children("a").children("span").css("color", "#fff");
}
});
//点击评论框出现回复按钮
$(".sub-comment-input-text").focus(function () {
//获取当前点击的ID
$(this).siblings(".sub-comment-input-submit").show();
});
//点击取消收起按钮
$(".sub-comment-button-cancel").click(function () {
//清空对应文本框中的内容
$(this).parent(".sub-comment-input-submit").siblings(".sub-comment-input-text").val("");
$(this).parent().hide();
});
//点击绿色回复框，将要回复的目标用户名以@形式放入指定输入框，并将目标回复对象放入属性中
$(".sub-comment-btn").click(function () {
let replyUsername = $(this).parent().children("a").children("span").html(); //要回复的用户名
let replyFor = " @" + replyUsername + "：";
$(this).parent(".comment-index-name").parent("li").siblings(".sub-comment-input").children(".sub-comment-input-text").val(replyFor);
});
//先遍历查询点赞状态
if ($.trim(username).length > 0) {
$(".operate").each(function () {
let me = $(this);
let commentId = $(this).attr("data-id");
let commentUsername = $(this).attr("comment-uname");
$.ajax({
type: "get",
url: "/getLikeStatus",
data: {
username: username,
commentId: commentId,
commentUsername: commentUsername,
questionId: question.id
},
success: function (res) {
if (res.code === 200) {
if (res.data === 1) {
//是已赞状态，改变css
me.css("background-color", "#499ef3");
me.children("a").children("i").css("color", "#fff");
me.children("a").children("span").css("color", "#fff");
} else {
me.css("background-color", "#f5f5f5");
}
} else {
me.css("background-color", "#f5f5f5");
}
}
});
});
}
//点赞评论
$(".operate").click(function () {
let me = $(this);
let commentId = $(this).attr("data-id");
let commentUsername = $(this).attr("comment-uname");
if (username === undefined || username === null || $.trim(username).length < 1) {
notice.msg("您还没有登录哦", {icon: 3, timeout: 1500});
return false;
}
if (username === commentUsername) {
notice.msg("您不能给自己点赞哦", {icon: 3, timeout: 1500});
return false;
}
$.ajax({
type: "get",
url: "/like",
async: false,
data: {
username: username,
commentId: commentId,
commentUsername: commentUsername,
questionId: question.id
},
success: function (res) {
if (res.code === 200) {
//点赞成功
if (res.data === 1) {
//修改数值
notice.info({
title: '消息通知',
message: '您点赞了 ' + commentUsername + ' 的评论',
timeout: 1500
});
let count = me.children("a").children("span").html();
let c = parseInt(count) + 1;
me.children("a").children("span").html(c);
me.css("background-color", "#499ef3");
me.children("a").children("i").css("color", "#fff");
me.children("a").children("span").css("color", "#fff");
} else {
notice.warning({
title: '消息通知',
message: '您取消了对 ' + commentUsername + ' 的点赞',
timeout: 1500
});
let count = me.children("a").children("span").html();
me.children("a").children("span").html(count - 1);
me.css("background-color", "#f5f5f5");
me.children("a").children("i").css("color", "#155faa");
me.children("a").children("span").css("color", "#155faa");
}
}
return false;
}
})
});
//新增评论中楼中楼回复
$(".sub-comment-button-comment").click(function () {
let replyContent = $(this).parent(".sub-comment-input-submit").siblings(".sub-comment-input-text").val(); //回复内容
let rId = parseInt($(this).attr("reply-id")); //父级评论ID
let replyUsername = $(this).attr("reply-user"); //获取回复对象用户名
//数据校验
if ($.trim(username).length === 0) {
notice.msg("您还没有登录哦", {icon: 3, timeout: 1500});
return;
}
if (($.trim(replyContent).length === 0)) {
notice.msg("回复内容不能为空哦", {icon: 3, timeout: 1500});
return;
}
$.ajax({
type: "post",
url: "/reply",
data: {
questionId: question.id,
username: username,
content: replyContent,
parentCommentId: rId,
replyfor: replyUsername
},
success: function (res) {
if (res.code === 200) {
notice.msg("回复成功", {
icon: 5, timeout: 1500, onClosed: function () {
parent.location.reload();
}
});
} else {
notice.msg("回复失败,请联系管理员", {
icon: 2, timeout: 1500, onClosed: function () {
parent.location.reload();
}
});
}
},
error: function () {
notice.msg("回复失败，请稍后再试", {icon: 2, timeout: 1500});
}
});
});
});
}
});
