关于jq .on方法的问题。

Question

arr中保存的是div的位置，div可以移动删除，现在的问题是如果删除div，他的位置也会加到arr中并且会重复，请问是执行顺序的问题吗？

var arr=[];

function add(){

    var addDiv=$("<div><span>DM54</span></div>");

    addDiv.addClass("draggable");

    addDiv.draggable();

    $(".box").append(addDiv);

}

$('.box')

     .on('click', '#close', function(){

        $("#popup").hide("slow");

       

    }) 

 .on('dblclick', '.draggable', function(){

    $("#popup").show("slow");

    var that=$(this);

    $('#delete').click(function(){

        that.remove();

        })

         })

   .on('mouseup', '.draggable', function(){

     var cache = $(this).css(['top','left']); 

       var location={

            id: $(this).index()+1,

             X: cache.top,

             Y: cache.left

        };

        arr.push(location);

    }) 

代码地址http://runjs.cn/detail/y2qtieiq （位置值是undefined可能是我粘代码问题可以忽略）