javascript - 如何改组div但不杀死其事件？

有我的脚本：

$(document).ready(function() {
  $(".button-collapse").sideNav();
  $('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: true, // Does not change width of dropdown to that of the activator
    hover: false,          // Activate on click
    alignment: 'right',    // Aligns dropdown to left or right edge (works with constrain_width)
    gutter: 0,             // Spacing from edge
    belowOrigin: false     // Displays dropdown below the button
  });
  $("#shuffle").bind('click', shuffle);

  function shuffle() {
    $(".facts").each(function() {
      var divs = $(this).children('div');
      for (var i = 0; i < divs.length; i++) $(divs[i]).remove();
      var i = divs.length;
      if (i == 0) return false;

      while (--i) {
        var j = Math.floor(Math.random() * (i + 1));
        var tempi = divs[i];
        var tempj = divs[j];
        divs[i] = tempj;
        divs[j] = tempi;
      }

      for (var i = 0; i < divs.length; i++) {
        $(divs[i]).appendTo(this);
      }
    });
  }
});

它先删除.facts中的所有div，然后再追加它们，以对其进行乱序处理，但是据我所知，它会杀死所有事件，因此第一部分初始化了materializecss的组件，第二部分是对元素进行乱序处理的函数。
虽然没有对元素进行混洗，但下拉列表仍然有效，但是一旦您使用“混洗”，下拉列表将无法使用...

最佳答案

使用jquery的detach()函数而不是remove()。

从文档中说：


  .detach（）方法与.remove（）相同，除了.detach（）
  保留所有与删除的元素关联的jQuery数据。这个
  当移除的元素要重新插入到
  DOM在以后的时间。


资源：
https://api.jquery.com/detach/