0

我遇到了这个问题，试图提高处理大量可拖动列表的性能；我尝试删除父容器，以便批处理项目会变得更快（因此每个处理都不会触发 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>元素上重新应用可拖动？如果是这样，那么如果我必须在之后重新申请某些东西，那么删除父母以加快流程是没有意义的，是吗？

4

1 回答 1

3

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

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

强调我的。

这是一个小提琴。

于 2012-05-21T17:25:55.793 回答