Question

在我的脚本中，我试图将一个元素（列表）从一个父元素（只是文本）移动到另一个父元素，然后再移回（到列表中）。问题是，当我将元素移回原始父元素（ul）时，它已变为不可单击。我认为在remove（）上使用detach（）可能会有所作为，但它没有什么区别。

$(document).ready(function() {
  $("#inventoryWeapon li").click(function(event) { 
    var clickedId = event.target.id;
    if ($("td#weapon").is(":empty")) {
      $("td#weapon").text(clickedId); 
      $(this).detach(); 
    }
  });
  $("td#weapon").click(function(event) { 
    var unequipping = $(this).text();
    $("#inventoryWeapon").append("<li id='" + unequipping + "'>" + unequipping + "</li>"); 
    $(this).detach();
  });
});

Answer 1

正如上面流行的评论中所建议的，你没有移动元素。要移动它，请执行此操作。

$("td#weapon").click(function(event) {
    $(this).appendTo($("#inventoryWeapon"));
});

Answer 2

您没有移动元素，您正在删除一个函数中的元素，并在另一个函数中创建具有相同ID和内容的新元素。但原始事件处理程序仅绑定到原始元素。

如果您希望事件处理程序使用动态创建的元素，请使用事件委派：

$("#inventoryWeapon").on("click", "li", function(event) {
    ...
});

或者，您可以在分离元素时保存元素，而不是重新创建元素：

var savedLI;
$("#inventoryWeapon li").click(function() {
    if ($("td#weapon").is(":empty")) {
        savedLI = $(this).detach();
        $("td#weapon").text(this.id);
    }
});
$("td#weapon").click(function() {
    if (savedLI) {
        $("#inventoryWeapon").append(savedLI);
        $(this).detach();
    }
});

jQuery：将元素移动到另一个元素然后再返回渲染元素不可点击

2 个答案: