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。

jQuery：为什么删除draggable的父级会破坏draggables？

1 个答案: