javascript - jquery Onclick函数与回调排序函数导致双击

Question

我有一个函数可以在两个列表之间附加一个项目。此外，我还使用函数按字母顺序排序待办事项列表，因此当某个项目移回待办事项列表时，它将按字母顺序重新排序。

问题是，因为我必须在排序期间重新分配 onclick 事件监听器，所以 onclick 函数会创建单击事件的循环 - 这由显示两个单击事件的控制台日志支持。这会导致链接中断，因为双击意味着任务项无法附加到其他 ID。

我已经尝试了一切，但没有成功 - 使用回调函数，使用 .trigger()，使用 .triggerHandler()。我确信我只需要一种方法来阻止事件再次触发。

我的 DOM 如下:

HTML

<div id="todo">
  <div class="task">
     <div class="c1">B</div>
     <a class="swap" href="JavaScript:void(0);">SWAP</a>
  </div>
  <div class="task">
     <div class="c1">A</div>
     <a class="swap" href="JavaScript:void(0);">SWAP</a>
  </div>
  <div class="task">
     <div class="c1">C</div>
     <a class="swap" href="JavaScript:void(0);">SWAP</a>
  </div>
</div>

<div id="done">
</div>

JAVSCRIPT

// initial $('a.swap').on('click', onClick) is assigned in the AJAX

var onClick = function (event) {
    // code to swap between lists on click of the a link

    // once the item is appended to the other list callback the sort function
    sortByName()
}

var sortByName = function () {
        var sortbyname = $('#todo').find($(".task")).sort(function (a, b) {
            if ($.trim($(a).find(".c1").text()) < $.trim($(b).find(".c1").text())) {
                return -1;
            } else {
                return 1;
            }
        });
        $("#todo").html(sortbyname);
        $('a.swap').on('click', onClick) //this is where the problem seems to be
    }

如果您能建议如何阻止 onclick 事件再次循环，我们将不胜感激。

非常感谢。

Answer 1

在添加新事件之前，请尝试删除当前事件。

$('a.swap').off('click').on('click', onClick);