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 ans div元素时，我希望每个答案只调用一次，这是：

<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()函数的执行次数与答案的次数相同，因此每个答案的click事件处理程序的绑定次数相同。也许这是模板呢？

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

到

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

取消绑定所有点击事件处理程序，但最后一个。

Answer 2

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

＆＃13;

$(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');
    }

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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');
}

}

JQuery函数调用多次触发

3 个答案: