无法获取 jQuery 中动态生成的按钮的数据属性值

Question

我是 JavaScript 新手，试图弄清楚如何访问动态生成的按钮的数据属性值。我将来自数据库的 ID 传递给“data-id”属性。下面是我的按钮动态生成的代码

<button class='btn btn-sm btn-primary aButton' data-id='1234'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>

现在我想使用 jquery 访问这些按钮 onclick 来执行一些操作。下面是我的代码

$(document).on('click', '.aButton', () => {
    let id = $(this).attr('data-id');
    console.log(id);
})

上面的控制台给我“未定义”的粗箭头功能。当我尝试对 function () {} 执行相同操作时，它为我提供了存储在按钮的 data 属性中的动态 ID。

这是怎么回事？有没有更好的方法来获取点击按钮的动态ID。谢谢大家。祝你今天过得愉快 ：）

Answer 1

当你使用箭头函数() => {}时，jquery 不知道它this指的是什么，所以使用：

$(document).on('click', '.aButton', (e) => {
  let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
  console.log(id);
})

演示

$(document).on('click', '.aButton', (e) => {
  let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
  console.log(id);
})

$(document).on('click', '.aButton', (e) => {
  let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
  console.log(id);
})