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。