JS 取 data-id 属性产生的问题

开发目的

在列表操作列开发的时候，为每条数据都分配对应的id，获取对应的操作按钮，于是我将需要的值赋给 data-id 属性，并使用JavaScript 来取这个属性。

问题描述与最终修复结果

一开始我使用的是 var id = $(this).data("id"); 来获取我在 data-id中存放的数据，但是在页面进行条件查询之后，每条数据对应的操作列的按钮都失效了

<!-- 原先-->
<button id="getData" name="getData" data-id="${item.id}">查看</button>


<script>
    $(document.body).on("click","button[name=getData]",function(){
        var id = $(this).data("id");
        layer.open({
            type: 2,
            area: ['60%', '65%'],
            title: '查看数据',
            scrollbar: false,
            content: 'xxx/getData/' + id
        });
    })

</script>

于是我改为将需要的数据赋值给 value 属性，操作列按钮失效 bug 修复。

<!-- 现在 -->
<button id="getData" name="getData" value="${item.id}">查看</button>


<script>
    $(document.body).on("click","button[name=getData]",function(){
        var id = $("#getData").val();
        layer.open({
            type: 2,
            area: ['60%', '65%'],
            title: '查看数据',
            scrollbar: false,
            content: 'xxx/getData/' + id
        });
    })

</script>

产生问题的原因

$(this).data("id") 是在使用 jQuery 时的一个表达式，它用于获取当前 jQuery 对象（$(this)）所代表的 DOM 元素上的 data-id 属性的值。
但是，jQuery 的 .data() 方法实际上并不总是直接从 HTML 属性中读取数据。
$(this).data("id") 首先是从 DOM 元素上通过 .data() 方法获取 id 键对应的值，如果没有设置 id 键，才会从 data-id HTML 属性中读取值。