$(this)，点击事件里有点击事件，触发多次ajax,如下图和代码

Question

问题 第一步，点击...，显示红色的罩层 第二步，点击启动答题 点击了启动答题，就产生问题了 第一次点击的时候，只发一次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)) } }) }

Answer 1

很简单，因为你“启动答题”的按钮绑定事件是包在了 “...”这个东西的点击事件里面，
那么在点击“...”这个的时候，“启动答题”的按钮绑定了一个事件了
再点一次“...”的时候，“启动答题”的按钮又再绑定了同样的另外的一个事件，
你把“启动答题”的按钮绑定事件放在外面不就行了吗？？？
你要获取的那些courseId, classId, piId,testId，不是也可以通过和“...”的共同父类一级一级往下找的吗，不需要通过点击"..."的$(this)来找的啊

Answer 2

就这么跟你讲吧，最近一个月以来，所有题目中使用jQ绑定事件又碰到重复触发执行这种bug的，100%是由于：

1. 使用了jQ的事件快捷写法；
2. 在绑定的事件回调中写了另一个事件绑定。

当然，一个月是预估，一年以来都不是没有可能。