使用jQuery Sortable拖拽<li>后控制台重复输出元素问题求助（非jQuery UI Sortable）

兄弟，你碰到的这个重复输出问题我之前也踩过坑，大概率是事件重复绑定或者Sortable初始化多次导致的——毕竟页面显示正常，说明排序功能本身没问题，只是日志触发了两次。下面给你几个针对性的解决办法：

1. 先销毁旧实例，避免重复初始化 #

很多时候我们会在按钮点击、异步加载后重复执行Sortable初始化代码，导致同一个<ul>绑定了多次update事件，拖动时自然会输出多次。你可以先销毁已存在的Sortable实例再重新初始化：

// 先判断是否已有Sortable实例，有的话销毁
if ($('ul').data('sortable')) {
  $('ul').sortable('destroy');
}

// 重新初始化并绑定update事件
$('ul').sortable({
  update: function(e, ui) {
    // 只输出当前排序的列表下的li
    console.log($(this).find('li'));
  }
});

2. 只监听update事件，别碰change #

jQuery Sortable的change事件是在拖动过程中元素位置变化时触发的，会多次调用；而update是排序完成、元素位置确定后才触发一次。如果你同时监听了这两个事件，肯定会出现重复输出。确保只绑定update事件就好。

另外注意：别在update事件处理函数里再初始化Sortable，这会形成循环绑定，坑上加坑。

3. 事件委托要先解绑再绑定 #

如果你用了事件委托（比如$(document).on('sortupdate', 'ul', ...)），一定要避免重复绑定。可以先解绑之前的事件，再重新绑定：

// 先解绑之前的sortupdate事件
$(document).off('sortupdate', 'ul');
// 再绑定新的事件处理函数
$(document).on('sortupdate', 'ul', function(e, ui) {
  console.log($(this).find('li'));
});

4. 确保选择器只选中当前列表的

#

有时候输出重复可能是你的选择器范围太大，比如用$('li')会选中页面上所有<li>，而不是当前排序的那个<ul>下的。在事件处理函数里用$(this)指代当前排序的<ul>，这样就能精准输出目标元素了：

update: function(e, ui) {
  const currentItems = $(this).children('li');
  console.log(currentItems);
}

你先对照自己的JS代码排查下，最常见的就是初始化重复或者事件绑定重复的问题，调整后应该就能解决啦。

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