javascript - 如何洗牌 div 但不杀死他们的事件？

Question

这是我的脚本:

$(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 的组件，第二部分是随机播放元素的函数。虽然元素未随机播放，但只要您使用 Shuffle - Dropdown 就不起作用 ...

Answer 1

使用 jquery 的 detach() 函数代替 remove()。

从文档中，它说:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

来源: https://api.jquery.com/detach/