如何用jQuery处理两个div点击事件并获取data属性的key值

原有代码的问题 #

• 事件绑定逻辑嵌套：你把.table-autocomplete-value的点击事件注册放在了#select-ac的点击回调内，只有先点击过一次#select-ac，列表项的点击事件才会生效，且多次点击#select-ac会重复绑定事件，引发逻辑异常。
• 元素范围不匹配：你当前的HTML结构中，所有.table-autocomplete-value元素并不在#select-ac容器内部，自然无法按照限定范围选中对应元素。

修复方案 #

首先你可以选择调整HTML结构，把整个自动补全的列表相关代码放到<div id="select-ac"></div>标签内部，之后使用事件委托的写法绑定事件即可，该写法同时支持动态生成的自动补全列表项：

$(document).ready(function() {
  $('#select-ac').on("click", ".table-autocomplete-value", function () {
    let currentIndex = $(this).data('key');
    console.log('the value is: ' + currentIndex)
  });
});

如果你不想改动现有HTML结构，只需要把委托的父元素替换为列表实际的上层静态父元素即可：

$(document).ready(function() {
  $('.company-name-form-container').on("click", ".table-autocomplete-value", function () {
    let currentIndex = $(this).data('key');
    console.log('the value is: ' + currentIndex)
  });
});

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