似乎有些对象引用保留在内存中？

Question

Code：

HTML

<a id="go" href="javascript:void(0);">Start</a> 

<div id="container"> 
    <div class="example" id="example1">1</div> 
    <div class="example" id="example2">2</div> 
    <div class="example" id="example3">3</div> 
</div> 

jQuery的

$('#go').click(function() { 
    InitDragDrop(); 
}); 

function InitDragDrop() { 
    var BoxImmagineFutura = null; 

    $('#boxTemp').remove(); 
    BoxImmagineFutura = $('<div/>', { id: 'boxTemp', class: 'boxTempClass', text: 'Added' }); 
    BoxImmagineFutura.appendTo($("#container")); 

    $('.example').mousedown(function (e) { 
     BoxImmagineFutura.insertBefore("#example2"); 
     BoxImmagineFutura.show(); 
    }); 
} 

CSS

.example, #boxTemp 
{ 
    float:left; 
    width:40px; 
    height:40px; 
    margin:10px; 
    border:1px solid #000000; 
    cursor:pointer; 
} 

#boxTemp 
{ 
    background-color:red; 
    display:none; 
} 
​ 

为了：

1. 单击开始初始化函数/处理程序;
2. 单击一个div（当您按下鼠标时，您将显示添加框）;
3. 再次单击“开始”以重置所有变量;
4. 再次点击一个div：为什么有两个添加div？我已经删除了前一个$('#boxTemp').remove();

你能帮我解决这个麻烦吗？如果我删除BoxImmagineFutura.insertBefore("#example2");，那个div没有“克隆”。

先编辑：

呀，我每次打电话InitDragDrop（）我也应该取消绑定mousedown()，但是这并不能说明我的问题

Answer 1

将您的var BoxImmagineFutura = null;拉出您的功能。另外，您不需要BoxImmagineFutura.appendTo($("#container"));，因为您的insertBefore将其插入到DOM中。

jsFiddle example

Answer 2

你只是在鼠标悬停隐藏BoxImmagineFutura不删除。如果你仔细看看，$（'＃boxTemp'）。remove（）;只会在您点击开始时被调用一次。首先，'#boxTemp'不存在，所以$（'＃boxTemp'）。remove（）;将无能为力。接下来，当你对“.example”进行挖掘时，它会简单地在“＃example2”之前插入另一个div，当你“mouseup”时，你只是隐藏了这个div。

而不是如果你只是移动$（'＃boxTemp'）。remove（）;在“mouseup”事件中，您的问题将得到解决。

此外，你没有做任何克隆。这意味着，一旦你使用BoxImmagineFutura，它就消失了。