jquery-空工作一次

Question

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

<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并不多），我相信时间是绑定/解除绑定处理程序的问题，但真诚地说，自那以后发生了一段时间。

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>