具有回调排序功能的jquery Onclick函数导致双击

时间:2016-05-16 20:05:08

标签: javascript jquery sorting dom frontend

我有一个在两个列表之间追加项目的函数。另外,我还有一个todo列表,按字母顺序排列一个函数,因此当一个项目移回todo列表时,它将按字母顺序重新排序。

问题是因为我必须在排序期间重新分配onclick事件监听器,onclick函数会创建click事件的循环 - 这由控制台日志显示,显示两个单击事件。这会导致链接中断,因为双击意味着任务项无法附加到其他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事件第二次循环,那将非常感激。

非常感谢。

1 个答案:

答案 0 :(得分:1)

尝试删除当前事件,然后再添加新事件。

CREATE FUNCTION [dbo].[GetTexts](@id INT)
    RETURNS VARCHAR(4000)
AS
BEGIN
    DECLARE @res NVARCHAR(4000)

    SELECT  DISTINCT
            @res =
            SUBSTRING(
            (
                SELECT  ',' + SC1.[text]
                FROM    dbo.syscomments SC1
                WHERE   SC1.id = SC2.id
                FOR     XML PATH ('')
            ), 2, 4000)
    FROM    dbo.syscomments SC2
    WHERE   SC2.id = @id

    RETURN @res
END