使用List.js排序DOM列表后，点击列表项无法获取新索引问题

使用List.js对HTML列表排序后，点击列表项仍输出旧顺序的索引，即使在updated事件中重新赋值了nodeList。

问题原因 #

1. 初始的forEach仅给第一次加载的列表项绑定了点击事件，事件中的index是闭包保存的旧顺序索引，不会随DOM排序自动更新。
2. 重新赋值nodeList只是更新了变量引用，但DOM元素上已绑定的旧事件不会自动失效，新的nodeList也没有重新绑定事件。

解决方案 #

方案1：事件委托（推荐）

将点击事件绑定到父元素（<ul>），利用事件冒泡机制，每次点击时实时计算当前元素的新索引，无需关心列表排序变化：

<div id="mylist">
  <ul class="simple list">
    <li class="items">one</li>
    <li class="items">two</li>
    <li class="items">three</li>
    <li class="items">four</li>
  </ul>
</div>

// 获取父容器
const listParent = document.querySelector('.simple.list');

// 绑定事件委托
listParent.addEventListener('click', (e) => {
  // 确保点击的是目标列表项
  if (e.target.classList.contains('items')) {
    // 把父元素的有效子节点（排除文本节点）转为数组
    const sortedItems = Array.from(listParent.children).filter(child => child.nodeType === Node.ELEMENT_NODE);
    // 获取当前项的最新索引
    const currentIndex = sortedItems.indexOf(e.target);
    console.log(currentIndex);
  }
});

// 初始化List.js
const list = new List("mylist", { "some options" });

方案2：更新后重新绑定事件

在List.js的updated事件中，重新获取列表项并绑定点击事件，同时移除旧事件避免重复触发：

let nodeList = getUpdatedList();

function getUpdatedList() {
  return document.querySelectorAll('.items');
}

// 抽离点击事件函数，方便移除和绑定
function handleItemClick(index) {
  console.log(index);
}

// 封装绑定事件的逻辑
function bindItemEvents() {
  // 先移除旧事件
  nodeList.forEach(item => {
    item.removeEventListener('click', handleItemClick);
  });
  // 获取最新的列表项
  nodeList = getUpdatedList();
  // 重新绑定事件，传入最新索引
  nodeList.forEach((item, index) => {
    item.addEventListener('click', handleItemClick.bind(null, index));
  });
}

// 初始化List.js
const list = new List("mylist", { "some options" });

// 初始绑定事件
bindItemEvents();

// 列表更新后重新绑定
list.on('updated', bindItemEvents);

说明 #

• 事件委托方案更高效，无需在每次排序后重新绑定事件，适合频繁排序的场景。
• 重新绑定方案需要注意事件的移除，避免同一元素绑定多个相同事件导致多次触发。

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