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 了解不多），我相信时间是 binding/unbinding 处理程序的一个问题，但真诚地这是一个而自那之后。

Answer 1

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

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

updated fiddle

Answer 2

https://jsfiddle.net/nitishk72/uowu0mu4/

你只需要删除而不是清空。

  function item_set(item_id) {
    var it_id = item_id;
    var it_info = $("#item_info_" + it_id).html();
    $(".equipment_item_unset#" + it_id).remove();
    $(".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>');
  }

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>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

jquery- 空的只工作一次

jquery- empty working only once

javascript

jquery

unbind