jquery 带有回调排序功能的onclick函数导致双击

Question

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

问题是因为我必须在排序期间重新分配 onclick 事件侦听器，onclick 函数创建了一个点击事件循环 - 这由显示两个点击事件的控制台日志支持。这会导致 link 中断，因为双击意味着任务项无法附加到其他 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);

jquery 带有回调排序功能的onclick函数导致双击

jquery Onclick Function with Callback Sorting Function Causing Double Click

javascript

sorting

jquery

frontend

dom