jQuery :为什么移除draggable的父级会破坏draggable？

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>元素上重新应用draggable吗？如果是这样，那么如果我必须在之后重新应用一些东西，那么就没有必要为了加快进程而删除父级，是吗？

Answer 1

使用.detach()而不是.remove()保留附加的事件处理程序。以下是这些文档的摘录。

.remove()方法从DOM中取出元素。当您想要删除元素本身以及其中的所有内容时，请使用.remove()。除了元素本身之外，与元素关联的所有绑定事件和jQuery数据都将被删除。要在不删除数据和事件的情况下删除元素，请改用.detach()。

重点是我的。

这是一个fiddle。