jQuery：将元素移动到另一个元素并再次返回会使元素不可点击

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();
    }
});