jquery Onclick-Funktion mit Callback-Sortierfunktion verursacht Doppelklick

Question

Ich habe eine Funktion, die ein Element zwischen zwei Listen anfügt. Zusätzlich habe ich die ToDo-Liste auch alphabetisch mit einer Funktion sortiert. Wenn ein Objekt in die ToDo-Liste verschoben wird, wird es alphabetisch neu geordnet.

Das Problem ist, dass, weil ich den onclick-Ereignis-Listener während der Sortierung neu zuweisen muss, die onclick-Funktion eine Schleife des klickenden Ereignisses erstellt - dies wird durch das Konsolenprotokoll mit zwei Klickereignissen gesichert. Dadurch wird die Verknüpfung unterbrochen, da der Doppelklick bedeutet, dass das Aufgabenelement nicht an die andere ID angefügt werden kann.

Ich habe alles versucht, aber ohne Erfolg - mit Callback-Funktion, mit .trigger(), mit .triggerHandler(). Ich bin mir sicher, ich brauche nur einen Weg, um das Ereignis zu stoppen, ein zweites Mal zu schießen.

Mein DOM ist wie folgt:

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 
    } 

Wenn Sie raten können, wie ein zweites Mal von looping, das Onclick-Ereignis zu stoppen das würde sehr geschätzt werden.

Vielen Dank.

Answer 1

Versuchen Sie, das aktuelle Ereignis zu entfernen, bevor Sie das neue hinzufügen.

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