jQuery中$.each循环内绑定click事件仅返回数组最后ID如何解决？

• 重复绑定覆盖问题 #

你在$.each循环内每次都执行$(document).unbind().on('click', '.messageemoji')，unbind()会清除之前所有绑定到document上的同类型事件，只有最后一次循环绑定的事件会生效，因此触发时只能拿到最后一次循环的ID。同时直接全局解绑document的事件还可能误删页面其他逻辑绑定的事件，属于高危操作。

• 循环闭包陷阱 #

即使你去掉unbind()，循环内的事件回调引用的index/val都是同一个变量，回调触发时循环已经执行完成，变量会停留在最后一次循环的赋值，还是会拿到最后一个ID。

• data属性取值错误问题 #

如果通过DOM查找拿不到ID，大概率是两个原因：一是渲染DOM的时候没有把ID正确写入到.messageemoji或其上级节点的data-*属性中；二是查找层级不对，closest()/parent()的选择器和实际DOM结构不匹配。

1. 把事件委托逻辑移到循环外部，全局仅绑定一次：

// 循环外绑定事件，只执行一次
$(document).off('click', '.messageemoji').on('click', '.messageemoji', function() {
  // 直接从点击的元素上取提前写入的data属性
  const currentId = $(this).data('target-id')
  console.log(currentId) // 就是你需要的当前ID
})

2. 循环内仅做DOM渲染，把对应ID写入到.messageemoji的data属性中：

$.each(arr, function(index, val) {
  // 渲染逻辑示例，把ID写入到元素的data-target-id属性
  const emojiDom = `<div class="messageemoji" data-target-id="${val.id}">xxx</div>`
  // 把emojiDom插入到对应位置即可
})

内容的提问来源于stack exchange，提问作者Stig Kølbæk