jQuery：爲什麼要移除可拖動的父節點可拖動？

Question

我遇到了這個問題，試圖提高處理大量可拖動列表的性能;我嘗試刪除一個父容器，這樣批處理項目會變得更快（因此每個處理都不會觸發DOM刷新），並且之後重新插入容器確實會導致可拖動項停止工作。例如

對於

<div id="listParent"> 
<div id="listWrapper"> 
    <ul id="draggableList"> 
     <li class="draggable">Item 1</li> 
     <li class="draggable">Item 2</li> 
     <li class="draggable">Item 3</li> 
     <li class="draggable">Item 4</li> 
     <li class="draggable">Item 5</li> 
     <!-- many more items here --> 
    </ul> 
</div> 
</div> 
<script type="text/javascript"> 
$(function() { 
    $(".draggable").draggable({ 
     revert: true 
    }); 

    function filterItems(text) { 
     var p = $('#listWrapper').remove(); 

     // for each <LI> element, hide the ones who do not match `text`'s value 

     p.appendTo('#listParent'); 
    } 
    // ... 
}); 
</script> 

所以，調用filterItems('foo');，例如，導致項目無法被拖拽元素了。我是否必須再次在<LI>元素上重新應用可拖動的元素？如果是這樣，那麼如果我不得不重新申請某些東西，那麼沒有必要移除父母來加速過程，是嗎？

Answer 1

使用.detach()而不是.remove()來保留附加的事件處理程序。以下是文檔摘錄。

.remove（）方法將元素從DOM中取出。使用.remove（）當您想要刪除元素本身以及其中的所有元素時，使用 。除了元素本身之外，所有與元素相關的綁定事件和jQuery數據 都被刪除。 要刪除元素 而不刪除數據和事件，請改爲使用.detach（）。

強調我的。

這是fiddle。