JQuery 函数调用触发多次

Question

我正在尝试使用 jquery 为 html 元素调用一个函数。我已经为此苦苦挣扎了几个小时，我无法弄清楚出了什么问题。 我有一个答案，我想标记为已解决。一个问题有多个答案。 据我所知，该函数正在触发我在问题中的答案数量。如果我有两个答案，该函数将运行两次，依此类推。

$(document).ready(function () {

$(".accepted.ans").on('click', function (e) {
e.preventDefault();
var parent = $(this).closest('.accept');
console.log(parent);
var current = $(this);
console.log(current);
var url = parent.data('url');
var qid = parent.data('question');
var aid = parent.data('answer');
$.get(url + '?question=' + qid + '&answer=' + aid, function (data) {
console.log("Reading...");
data = $.parseJSON(data);
console.log(aid);
console.log(e);
setAcceptedStatus(current, data.result);
});
});
});
function setAcceptedStatus(object, status) {
if (status === true) {
object.addClass('active');
}
}

这是我的jQuery函数。当我按下accept ansdiv 元素时，我想为每个答案精确调用一次，即：

<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}" >
<div class="accept"
title="Accept this answer"
data-url="{url('controller/api/questions/mark_as_solved')}"
data-refresh="{url('controller/api/questions/refresh_accepted_answers')}"
data-answer="{$answer['answerid']}"
data-question="{$question['publicationid']}">
<div class="accepted ans"
id="{$answer['answerid']}"
title="Unnacept this answer">
</div>
</div>
</blockquote>

我认为发生这种情况是因为每次我想调用该函数时，因为我已经$(".accepted.ans")它将应用于它可以在文档上找到的所有accepted ans。所以我想在类中添加一个id，比如：

id="{$answer['answerid']}"

但是当我在这里的某处读到的那样，它应该在没有它的情况下工作。

我真的不知道为什么它会触发不止一次，我做了各种调试，检查了 html 结构，一切似乎都完美无缺。

任何善良的灵魂都知道什么是错的？

问候

Answer 1

我怀疑不知何故，$(document).ready()函数的执行次数与您的答案一样多，因此每个答案的单击事件处理程序绑定的次数相同。也许是模板这样做了？

如果这确实是问题所在，并且您找不到模板的解决方案，请尝试更改$(".accepted.ans").on('click', function (e) {

自

$(".accepted.ans").off('click').on('click', function (e) {

取消绑定除最后一个之外的所有单击事件处理程序。

Answer 2

尝试将.closest(...更改为.parent()。下面的片段...

$(document).ready(function() {
$(".accepted.ans").on('click', function(e) {
e.preventDefault();
var current = $(this),
parent = current.parent();
var url = parent.data('url');
var qid = parent.data('question');
var aid = parent.data('answer');
console.log(aid);
$.get(url + '?question=' + qid + '&answer=' + aid, function(data) {
console.log("Reading...");
data = $.parseJSON(data);
console.log(aid);
console.log(e);
setAcceptedStatus(current, data.result);
});
});
});
function setAcceptedStatus(object, status) {
if (status === true) {
object.addClass('active');
}
}

.ans {
position: static;
width: 90%;
height: 5em;
background: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}">
<div class="accept" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="one" data-question="{$question['publicationid']}">
<div class="accepted ans" id="{$answer['answerid']}" title="Unnacept this answer">
</div>
</div>
</blockquote>
<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}">
<div class="accept" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="two" data-question="{$question['publicationid']}">
<div class="accepted ans" id="{$answer['answerid']}" title="Unnacept this answer">
</div>
</div>
</blockquote>
<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}">
<div class="accept" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="three" data-question="{$question['publicationid']}">
<div class="accepted ans" id="{$answer['answerid']}" title="Unnacept this answer">
</div>
</div>
</blockquote>

Answer 3

使用 jQuery，您需要防止它的函数被附加到其父标签的其他事件侦听。因此，请尝试使用stopPropagation();。

$(document).ready(function () {

$(".accepted.ans").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
var parent = $(this).closest('.accept');
console.log(parent);
var current = $(this);
console.log(current);
var url = parent.data('url');
var qid = parent.data('question');
var aid = parent.data('answer');
$.get(url + '?question=' + qid + '&answer=' + aid, function (data) {
console.log("Reading...");
data = $.parseJSON(data);
console.log(aid);
console.log(e);
setAcceptedStatus(current, data.result);
});
});
});
function setAcceptedStatus(object, status) {
if (status === true) {
object.addClass('active');
}
}