li嵌套div后，JS中getAttribute获取data-value返回null的问题

当给li嵌套div后，点击区域时，e.target指向的是实际被点击的div元素，而不是外层的li——div上并没有data-value属性，所以getAttribute('data-value')自然返回null。

以下是几种可行的修复方式：

1. 使用this获取绑定事件的li元素 #

在jQuery事件回调里，this指向事件委托绑定的目标元素（即li），直接用它获取属性：

$("#_listus").on('click', 'li', function () {
    const domIndex = this.getAttribute('data-value');
    $('#hdId').val(domIndex);
});

2. 使用e.currentTarget替代e.target #

e.currentTarget始终指向绑定事件处理函数的元素（即li），作用和this一致：

$("#_listus").on('click', 'li', function (e) {
    const domIndex = e.currentTarget.getAttribute('data-value');
    $('#hdId').val(domIndex);
});

3. 利用jQuery的.data()方法 #

针对data-*属性，jQuery的data()方法可以直接读取对应值，写法更简洁：

$("#_listus").on('click', 'li', function () {
    const domIndex = $(this).data('value');
    $('#hdId').val(domIndex);
});

4. 通过closest()定位父级li #

如果一定要基于e.target处理，可以向上查找最近的li元素：

$("#_listus").on('click', 'li', function (e) {
    const domIndex = e.target.closest('li').getAttribute('data-value');
    $('#hdId').val(domIndex);
});

内容的提问来源于stack exchange，提问作者Chim Di Tru