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

如果您使用.clone，则可以使用附加的事件复制元素... 为了遵循你的逻辑，我已经在newDivs数组中预订了克隆的div，因此我可以将它们附加到当前元素。

$(".facts").each(function() {
  var divs = $(this).children('div'),
    newDivs = [];
  for (var i = 0; i < divs.length; i++) {
    newDivs.push(divs[i].clone(true));
    $(divs[i]).remove();
  }
  var i = newDivs.length;
  if (i == 0) return false;
  while (--i) {
    var j = Math.floor(Math.random() * (i + 1));
    var tempi = newDivs[i];
    var tempj = newDivs[j];
    newDivs[i] = tempj;
    newDivs[j] = tempi;
  }
  for (var i = 0; i < newDivs.length; i++) {
    $(newDivs[i]).appendTo(this);
  }
});

Answer 2

只是不要删除它们。

如果你在其他地方附加一个已经在文档中的元素，那么它将移动而没有其他效果。

那就是说，我不是100％肯定jQuery的表现就像那样。应该，但我不能保证。更喜欢JS的原生this.appendChild(newDivs[i]);。

Answer 3

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

从文档中可以看出：

.detach（）方法与.remove（）相同，但.detach（）除外保持所有jQuery数据与删除的元素相关联。这个当要删除的元素要重新插入时，方法很有用以后的DOM。

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

如何改变div，但不要杀死他们的事件？

3 个答案: