如何修复append功能关联的onClick按钮 实现独立开闭并解决卡顿问题

问题核心原因 #

1. 原代码给.item-all .item-save重复绑定了两次点击事件，每次点击都会同时执行两段逻辑，多次触发DOM操作和localStorage读写，是连续点击出现卡顿的核心原因
2. 打开/关闭逻辑共用整个卡片作为触发区域，没有拆分独立按钮，逻辑耦合严重

修改方案 #

已拆分独立的open、close按钮，同时移除了重复事件绑定解决卡顿问题，完整可运行代码如下：

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='item-all'>
  <div class='item-save' data-id='123'>
    Save1
    <button class='open'>Open</button>
  </div>
  <div class='item-save' data-id='124'>
    Save2
    <button class='open'>Open</button>
  </div>
  <div class='item-save' data-id='125'>
    Save3
    <button class='open'>Open</button>
  </div>
  <div class='item-save' data-id='126'>
    save4
    <button class='open'>Open</button>
  </div>
</div>
<div class='item-append'>
</div>
<div class='count'>0</div>

CSS 代码

.item-save {
  position: relative;
  display: block;
  font-size: 14px;
  margin: 5px;
  padding: 8px 12px;
  background: #a5a5a5;
  float: left;
  text-align: center;
}
.item-save button {
  margin-left: 8px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
}
.productad {
  background: red;
  color: #eee
}
.count {
  display: block;
  background: #cbcbcb;
  float: left;
  font-size: 15px;
  padding: 5px 18px;
  margin: 10px;
}

JS 代码

function createItem(item) {
  var elemId = item.data("id");
  var clonedItem = item.clone();
  // 克隆的卡片只保留close按钮
  clonedItem.find('.open').remove();
  clonedItem.append(`<button class='close'>Close</button>`);
  var newItem = $(`<div data-id="${elemId}"></div>`);
  newItem.append(clonedItem);
  newItem.appendTo('.item-append');
}

function countSaveItems() {
  $('.count').html($(".item-append div[data-id]").length);
}

// 绑定open按钮事件
$('.item-all .item-save .open').click(function() {
  var parentItem = $(this).closest('.item-save');
  var elemId = parentItem.data("id");
  var existing = $(`.item-append div[data-id="${elemId}"]`);
  // 已打开的直接返回避免重复添加
  if (existing.length > 0) return;
  parentItem.addClass('productad');
  window.localStorage.setItem('test_' + elemId, 'true');
  createItem(parentItem);
  countSaveItems();
});

// 初始化本地存储状态
$('.item-all .item-save').each(function() {
  var id = 'test_' + $(this).data("id");
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    createItem($(this));
    countSaveItems();
  }
});

// 绑定关闭按钮事件
$(".item-append").on("click", ".close", function() {
  var id = $(this).closest('div[data-id]').data("id");
  localStorage.removeItem(`test_${id}`);
  $(`.item-save[data-id='${id}']`).removeClass('productad');
  $(this).closest('div[data-id]').remove();
  countSaveItems();
});

功能说明 #

• 点击左侧卡片的Open按钮即可添加对应卡片到下方区域，同个卡片不会重复添加
• 点击下方卡片的Close按钮即可移除对应卡片，状态同步到localStorage
• 移除了重复事件绑定，连续点击不会再出现卡顿问题

内容的提问来源于stack exchange，提问作者Dasy