Question

我正在使用.clone()将项目从一个li移动到另一个li，克隆一个很好，但是当我克隆多个项目时，克隆项目的第二个第三个第四个等将不响应要添加的单击事件。如果需要，我可以将它们移回原来的li。

这里有javaScript有按钮控件，添加和删除类的功能以及移动li项的功能

$("li").on("click", highlighter);
$("#moveright").click(function() {
  moveItems("#leftlist", "#rightlist");
});
$("#moveleft").click(function() {
  moveItemsBack(".highlight", "#leftlist");
});

function highlighter(e) {
  if (e.target.className === "list-group-item") {
    $(this).addClass("highlight");
  } else {
    $(this).removeClass("highlight");
  }
}

function moveItems(origin, destination) {
  var highlighted = document.querySelectorAll(".highlight");
  highlighted.forEach(function(thisObj) {
    $(thisObj).clone(true).appendTo(destination);
    ("#leftlist .highlight").remove();
    setTimeout(removeHighlight, 500);
  });
}

function moveItemsBack(origin, destination) {
  var highlighted = document.querySelectorAll("#rightlist .highlight");
  highlighted.forEach(function(thisObj) {
    $(thisObj).clone(true).appendTo(destination);
    $("#rightlist .highlight").remove();
    setTimeout(removeHighlight, 500);
  });
}

function removeHighlight() {
  $("li").removeClass("highlight");
}

这是HTML

<ul id="leftlist" class="list-group list-group-flush">
  <li class="list-group-item">a item</li>
  <li class="list-group-item">b item</li>
  <li class="list-group-item">c item</li>
  <li class="list-group-item">d item</li>
  <li class="list-group-item">e item</li>
  <li class="list-group-item">f item</li>
  <li class="list-group-item">g item</li>
  <li class="list-group-item">h item</li>
  <li class="list-group-item">i item</li>
  <li class="list-group-item">j item</li>
</ul>
</div>
</div>

<ul id="rightlist" class="list-group list-group-flush">
</ul>

Answer 1

如果要克隆所有子节点的事件处理程序，则需要使用$(thisObj).clone(true, true);。

第一个'True'将复制当前节点的事件，第二个'True'允许您复制所有子节点的事件。

使用.clone（）和forEach（）后项目行为不正常

1 个答案: