javascript - jquery-空仅工作一次

Question

我有两个简单的列表，当您单击某个项目时，项目会从一个列表转到另一个列表。为了实现这一点，我使用empty和append从一个列表中清除并将其添加到另一个列表中。但不幸的是它只在第一次有效。第二次它不会删除该项目，而是在相反的列表中附加更多相同的项目。这是代码的简短版本:

<script>
  function item_set(item_id) {
    var it_id = item_id;
    var it_info = $("#item_info_" + it_id).html();
    $(".equipment_item_unset#" + it_id).empty();
    $(".item_already_set").append('<div class="equipment_item_set" id="' + it_id + '" onclick="item_unset(' + it_id + ')"><span id="item_info_' + it_id + '">' + it_info + '</span><br>');

  }

  function item_unset(item_id) {
    var it_id = item_id;
    var it_info = $("#item_info_" + it_id).html();
    $(".equipment_item_set#" + it_id).empty();
    $(".item_unset").append('<div class="equipment_item_unset" id="' + it_id + '" onclick="item_set(' + it_id + ')"><span id="item_info_' + it_id + '">' + it_info + '</span><br>');
  }

</script>
UNSET
<div class="item_unset"></div>
<div class="equipment_item_unset" id="1063" onclick="item_set(1063)">
  <span id="item_info_1063">3 - Pans</span>
  <br>
</div>
<div class="equipment_item_unset" id="1040" onclick="item_set(1040)">
  <span id="item_info_1040">2 - Pots</span>
  <br>
</div>

<br>
<br>SET
<div class="item_already_set"></div>
<div class="equipment_item_set" id="1045" onclick="item_unset(1045)">
  <span id="item_info_1045">4 - Glasses</span>
  <br>
</div>

这里是 JSFiddle 中的代码:https://jsfiddle.net/qmekr48m/3/

我记得过去发生过与我类似的事情(抱歉，对 JQuery 不太感兴趣)，我相信时间是绑定(bind)/取消绑定(bind)处理程序的问题，但老实说，距离发生已经有一段时间了。

Answer 1

您正在寻找的功能是删除。 Empty 会删除元素内部的内容，但会保留元素，因此当您设置一个项目时，最终会得到两个具有相同 id 的元素。然后，当您取消设置该项目时，jquery 将获取它找到的具有该 id 的第一个元素。

$(".equipment_item_unset#" + it_id).remove();

updated fiddle