jQuery如何获取事件委托下动态元素点击的元素值？

现有代码的问题 #

当前写法会导致点击逻辑无法正常触发，问题点有两个：

• 事件委托的选择器参数格式错误：on()方法的第二个参数需要传入字符串形式的选择器，你传入了jQuery对象$('.add_other_ele')——初始绑定事件时，动态生成的目标元素还没存在，这个jQuery对象是空集合，根本匹配不到后续新增的元素
• 类名不统一：注释中标注的目标类是add_another_ele，事件绑定参数里写的类名是add_other_ele，需要和实际页面里的元素类名保持一致

修正后的可运行代码 #

首先引入你指定版本的jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

修正后的事件绑定逻辑：

// 绑定事件到静态存在的#table-body，用字符串选择器过滤动态生成的目标元素
$('#table-body').on('click', '.add_other_ele', function(){
  // 回调内this直接指向当前被点击的目标元素，可直接读取原生id属性
  const clickedId = this.id;
  // 也可以用jQuery方法获取：$(this).attr('id')
  console.log('当前点击的元素id为：', clickedId);
})

关键注意点 #

• 不要在回调里用全局选择器$('.add_other_ele')取id，这样拿到的是页面上所有匹配该类名的元素集合，不是实际触发点击的那一个
• 事件委托的绑定源必须是页面初始加载就存在的静态父元素，不能用动态生成的元素作为事件绑定的根节点

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