如何获取Nestable.js生成的嵌套列表中被点击的li元素ID？

我之前也碰到过一模一样的情况，你的代码没效果大概率是两个核心原因：动态元素的事件绑定方式不对，或者没用到Nestable自身提供的自定义事件，下面一步步给你捋清楚解决方案：

一、先搞定点击事件的问题 #

如果你的.dd-item是Nestable初始化后动态渲染出来的（比如拖拽生成、初始化列表时创建的），直接用$('.dd-item').on('click', ...)是绑定不上的——因为这些元素在你执行这段代码的时候，还没被添加到DOM里。

这时候必须用事件委托，把事件绑定到已经存在的父容器上（比如Nestable的根容器.dd），代码改成这样：

// 事件委托写法：绑定到父容器，监听子元素的点击
$('.dd').on('click', '.dd-item', function(event) {
  console.log('点击的li元素：', this); // this就是当前被点击的.dd-item
  console.log('事件目标：', event.target);
});

不管.dd-item是一开始就有的，还是后来动态添加的，这个写法都能触发点击事件。

二、处理Nestable的"change"事件注意点 #

你用的$('.dd-item').on('change', ...)完全没用，因为Nestable的change不是原生表单的change事件，它有自己的自定义事件体系，得这么用：

方法1：初始化时配置回调函数 #

// 初始化Nestable时直接绑定变化回调
$('.dd').nestable({
  // 你的其他配置，比如maxDepth、group等
  callback: function(list, event) {
    // list是当前Nestable实例，event是触发变化的事件对象
    console.log('列表结构变化了，操作的元素：', event.target);
  }
});

方法2：监听Nestable的自定义事件 #

// 单独监听nestable-change事件
$('.dd').on('nestable-change', function(event) {
  console.log('列表发生变化：', event.target);
  // 如果要定位具体操作的.dd-item，可以结合点击事件的逻辑一起用
});

三、额外排查小技巧 #

1. 先打开浏览器控制台（F12）看看有没有报错，比如Nestable、jQuery有没有正确加载，有没有变量冲突；
2. 手动写个静态的.dd-item测试下，如果静态的能触发点击，那肯定是动态元素的事件委托问题；
3. 确保你的代码是在DOM加载完成后执行的——要么放在$(document).ready(function(){ ... })里，要么放到HTML的</body>标签前面。

给你贴个完整的可运行示例：

<script>
$(document).ready(function() {
  // 初始化Nestable组件
  $('.dd').nestable({
    maxDepth: 3
  });

  // 事件委托绑定点击事件
  $('.dd').on('click', '.dd-item', function() {
    console.log('成功捕获点击的li：', this);
  });

  // 监听列表变化事件
  $('.dd').on('nestable-change', function(event) {
    console.log('列表结构已更新', event);
  });
});
</script>

这样应该就能正常获取到你要的.dd-item元素啦！

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