1

在我的脚本中，我试图将一个元素（列表）从一个父级（只是文本）移动到另一个父级，然后再返回（到列表）。问题是当我将元素移回原始父级（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();
  });
});
4

2 回答 2

2

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

$("td#weapon").click(function(event) {
    $(this).appendTo($("#inventoryWeapon"));
});
于 2013-10-22T20:23:32.307 回答
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();
    }
});
于 2013-10-22T20:24:06.240 回答