jquery - Combining sortable and droppable - adding link to dragged item -

i have list of draggable items can dragged sortable , rearranged. have bit working ok.

what trying add delete link each item once has been dropped. code have fires twice delete links each item , can't figure out why.

here's code:

    $(function () {     var order = null;      $("#sortable")         .sortable({             revert: true,             placeholder: "ui-state-highlight"         })         .droppable({             drop: function (event, ui) {                 addcontrols(ui.draggable);             }         });      $(".draggable").draggable({         connecttosortable: "#sortable",         helper: "clone",         revert: "invalid"     });     $("ul, li").disableselection(); });  function addcontrols($item) {     $item.append('<a href="#">delete</a>'); } 

there's js fiddle here play with: http://jsfiddle.net/2x7zk/

as simple workaround:

drop: function (event, ui) {               if (!ui.draggable.find('.delete').length) addcontrols(ui.draggable);           } 

function addcontrols:

function addcontrols($item) {       $item.append('<a href="#" class="delete">delete</a>');   } 

demo