$(this)，点击事件里有点击事件，触发多次ajax,如下图和代码
问题
第一步，点击...，显示红色的罩层
第二步，点击启动答题
点击了启动答题，就产生问题了
第一次点击的时候，只发一次ajax,第二次点击，就会触发2次，一直叠加
要循环的html
<div class="item-box">
<div class="box-hava-data">
<div class="item-white">
<div class="white-left">
<div class="left-top">
<span class="top-title">{{=it.paperName}}</span>
<input type="number" hidden="" class="this-paperId" value="{{=it.paperId}}" />
<span class="top-tag">{{=it.paperTypeName}}</span>
</div>
<div class="left-middle">
<span class="middle-time">{{=it.createTime}}</span>
<span class="middle-state">状态:
{{? it.status==="not_start"}}
未答题
{{?? it.status==="started"}}
答题中
{{??}}
结束答题
{{?}}
{{=it.questionCount}}题
</span>
</div>
<div class="left-bottom">
<span class="bottom-class">
{{? it.paperTypeId===6}}
{{=it.className}} - {{=it.studentName}}
{{??}}
{{=it.className}}
{{?}}
</span>
<span class="bottom-submit"> 已提交0/1</span>
<span class="bottom-noCorrect">未批改</span>
</div>
<input type="number" hidden="" name="testId" class="testId" value="{{=it.id}}" />
</div>
<div class="white-right">
<div class="circle">
<div class="pie_left">
<div class="left"></div>
</div>
<div class="pie_right">
<div class="right"></div>
</div>
<div class="theValue">
<p>正确率</p>
<p><span class="vauNum">{{=it.accuracy}}</span>%</p>
</div>
</div>
<div class="right-bottom">
//3个点点点
<span class="bottom-item"></span>
<span class="bottom-item"></span>
<span class="bottom-item"></span>
</div>
</div>
</div>
<div class="item-red">
{{? it.status==="not_start"}}
<div class="red-group">
<img class="group-img-start" src="../../image/index_start.png" alt="img" />
<p class="group-text">启动答题</p>
</div>
<div class="red-group">
<img class="group-img-del" src="../../image/index_del.png" alt="img" />
<p class="group-text">取消答题</p>
</div>
{{?? it.status==="started"}}
<div class="red-group">
<img class="group-img-stop" src="../../image/index_stop.png" alt="img" />
<p class="group-text">结束答题</p>
</div>
<div class="red-group">
<img class="group-img-scan" src="../../image/index_scan.png" alt="img" />
<p class="group-text">开始扫描</p>
</div>
<div class="red-group">
<img class="group-img-edit" src="../../image/index_edit.png" alt="img" />
<p class="group-text">开始批改</p>
</div>
{{??}} {{? it.correctStatus==="not_start"}}
<div class="red-group">
<img class="group-img-scan" src="../../image/index_scan.png" alt="img" />
<p class="group-text">开始扫描</p>
</div>
<div class="red-group">
<img class="group-img-edit" src="../../image/index_edit.png" alt="img" />
<p class="group-text">开始批改</p>
</div>
{{??}}
<div class="red-group">
<img class="group-img" src="../../image/index_ok_gray.png" alt="img" />
<p class="group-text">批改完成</p>
</div>
{{?}} {{?}} {{? it.courseId}}
<input type="text" hidden="" name="courseId" class="courseIdindex" value="{{=it.courseId}}" /> {{??}}
<input type="text" hidden="" name="courseId" class="courseIdindex" value="0" /> {{?}}
</div>
</div>
</div>点击事件
function IndexControl() {
var Red = $('.app-index .index-body .body-item .item-red');
var showRed = $('.app-index .index-body .body-item .item-white .white-right .right-bottom');
// var startBtn = $('.app-index .index-body .body-item .item-red .red-group .group-img-start');
var stopBtn = $('.app-index .index-body .body-item .item-red .red-group .group-img-stop');
var delBtn = $('.app-index .index-body .body-item .item-red .red-group .group-img-del');
var editBtn = $('.app-index .index-body .body-item .item-red .red-group .group-img-edit');
var scanBtn = $('.app-index .index-body .body-item .item-red .red-group .group-img-scan');
//显示红色遮罩层
showRed.click(function() {
$(this).parents('.item-white').siblings('.item-red').css('display', 'flex');
$(this).parents('.body-item').siblings().children('.item-red').hide();
$(this).parents('.body-item').siblings('.actived').children('.item-red').show();
var courseId = $(this).parents('.item-white').siblings(".item-red").children('.courseIdindex').val();
classId = $('#selectclassId').val();
piId = $(this).parents('.item-white').find('.this-paperId').val()
testId = $(this).parents('.item-white').children(".white-left").children('.testId').val()
// var startBtn = $(this).parents(".item-white").siblings(".item-red").find(".group-img-start");
// startControl(startBtn, courseId, classId, piId,testId);
//点击启动答题
$(this).parents(".item-white").siblings(".item-red").find(".group-img-start").click(function(event){
event.stopPropagation();
starttest_paper(courseId, classId, piId,testId)
})
stopControl(stopBtn, courseId, classId, piId,testId);
cancelControl(delBtn, courseId, classId, piId,testId);
editControl(editBtn, testId);
scanControl(scanBtn, testId);
});
//隐藏红色遮罩层
Red.click(function() {
$(this).hide();
})
}ajax
function starttest_paper(courseId,classId,paperId,testId, callback) {
var createBy = $api.getStorage('global_userId');
api.ajax({
url: cbd_server_url + 'exam/start',
method: 'put',
dataType: 'json',
headers:{
"Content-Type":'application/json',
},
data:{
body: {
id: testId,
paperId: paperId,
classId: classId,
courseId: courseId,
createBy:createBy
}
//status: "started"
// })
},
}, function(ret, err) {
if (ret) {
console.log(JSON.stringify(ret))
var result = ret.msg;
callback && callback(result);
} else {
console.log(JSON.stringify(err))
}
})
}
BIG阳浏览 1029回答 3
3回答
-
慕沐林林
很简单，因为你“启动答题”的按钮绑定事件是包在了 “...”这个东西的点击事件里面，那么在点击“...”这个的时候，“启动答题”的按钮绑定了一个事件了再点一次“...”的时候，“启动答题”的按钮又再绑定了同样的另外的一个事件，你把“启动答题”的按钮绑定事件放在外面不就行了吗？？？你要获取的那些courseId, classId, piId,testId，不是也可以通过和“...”的共同父类一级一级往下找的吗，不需要通过点击"..."的$(this)来找的啊 -
幕布斯6054654
就这么跟你讲吧，最近一个月以来，所有题目中使用jQ绑定事件又碰到重复触发执行这种bug的，100%是由于： 使用了jQ的事件快捷写法； 在绑定的事件回调中写了另一个事件绑定。 当然，一个月是预估，一年以来都不是没有可能。
随时随地看视频慕课网APP
PHP