在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后再次点击，元素又被绑定个点击事件，这样第二次点击就会执行两次
解决办法：使用jquery的one()方法，为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次
错误代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>首页</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<form id="form" action="http://127.0.0.1:3000/comment/create" method="post">
<div class="form-group">
<textarea name="text" cols="30" rows="10" placeholder="请输入内容"></textarea>
</div>
<button type="submit">提交留言</button>
<div class="radio_from">
<div class="radio">
<input id="all" type="radio" name="select" value="1" checked>
<label for="all">看全部</label>
</div>
<div class="radio">
<input id="self" type="radio" name="select" value="2">
<label for="self">只看自己</label>
</div>
</div>
</form>
<hr>
<div class="container"></div>
<div class="pop-up">
<div class="pop-up-box">
<textarea name="text" cols="30" rows="10" class="substance" placeholder="请更改内容"></textarea>
<div class="selete">
<button class="sure" conclick="sure()">确定</button>
<button class="cancel">取消</button>
</div>
</div>
<!-- <img src="./headerImg.jpg" alt="头像"> -->
</div>
</body>
<script>
$(function () {
getList()
// 提交评论
// 获取列表
function getList(filterType = 1) {
$.ajax({
url: 'http://127.0.0.1:3000/comment/list',
type: 'get',
data: { filterType: filterType },
dataType: "JSON",
xhrFields: {
withCredentials: true //允许跨域带Cookie
},
success: function (res) {
let data = res.data
let str = ''
$.get({
url: 'http://127.0.0.1:3000/users/getUserInfo',
xhrFields: {
withCredentials: true //允许跨域带Cookie
},
success: function (res1) {
let username = res1.data.username
for (let i = 0; i < data.length; i++) {
var time = new Date(data[i].time)
//日期
var DD = String(time.getDate()).padStart(2, '0'); // 获取日
var MM = String(time.getMonth() + 1).padStart(2, '0'); //获取月份，1 月为 0
var yyyy = time.getFullYear(); // 获取年
// 时间
hh = String(time.getHours()).padStart(2, '0'); //获取当前小时数(0-23)
mm = String(time.getMinutes()).padStart(2, '0'); //获取当前分钟数(0-59)
ss = String(time.getSeconds()).padStart(2, '0'); //获取当前秒数(0-59)
data[i].time = yyyy + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss;
str += `<div class="content">
<div class="content_r">
${data[i].time}
</div>
<div class="content_l">
<div class="title">
<img src="./headerImg.jpg" alt="头像">
<span>${data[i].username}</span></div>
<div class="text">
${data[i].content}
</div>
<div ${username == data[i].username ? '' : 'class="operate"'} >
<a class="edit" href="javascript:;" onClick="edit('${data[i]._id}') ">编辑</a>
<a class='del' href="javascript:;" onClick="delete1('${data[i]._id}')"}>删除</a>
</div>
</div>
</div>`
}
$('.container').html(str);
}
})
}
})
}
// 编辑
window.edit = (id) => {
console.log(1) //正常，点击一次输出一次
$('.pop-up').css({ 'display': 'block' })
$('body').css({'overflow':'hidden'})
$.ajax({
url: 'http://127.0.0.1:3000/comment/getListOne',
type: 'get',
data: { _id: id },
xhrFields: {
withCredentials: true //允许跨域带Cookie
},
success: function (res) {
let data = res.data[0]
$('textarea.substance').val(data.content)
//点击确定触发
//解决方法 下行代码换成$('.sure').one('click',function(){
$('.sure').click(function () {
console.log(2)//第一次点击一个2，第二次点击俩个2 刷新后第一次编辑修改正常，再点其他编辑修改后，第一个内容也变
$.ajax({
url: 'http://127.0.0.1:3000/comment/update',
type: 'post',
data: { _id: data._id, content: $('textarea.substance').val() },
xhrFields: {
withCredentials: true //允许跨域带Cookie
},
success: function (res1) {
$('.pop-up').css({ 'display': 'none' })
if ($('input:radio[name="select"]').prop('checked')) {
getList()
} else {
getList(2)
}
}
})
$('.pop-up').css({ 'display': 'none' })
$('body').css({'overflow':'auto'})
})
}
})
}
})
</script>
</html>页面
点击编辑弹出框
出现问题，第一次编辑后点击确定正常修改，
第二次修改第二个
再次修改第一个内容，发现第二个也会变
jquery中click事件的累加绑定，点击一次，执行多次 - 简书 (jianshu.com)
jQuery one() 方法 | 菜鸟教程 (runoob.com)
