jQuery使用data()读取动态生成按钮data-ref属性返回undefined问题排查

问题根源 #

• 内联onclick的this指向完全错位
  你给按钮写的onclick="add_to_storage()"，本质是点击触发时在全局作用域执行函数逻辑，函数内部的this默认指向全局window对象，根本不会自动绑定到当前被点击的按钮DOM节点。
  这时候你在函数里执行$(this).data("ref")，实际操作的是jQuery包装的window对象，window上不存在名为ref的自定义数据集属性，自然永远返回undefined——这个结果和你给data-ref加不加引号没有任何关系，哪怕属性值写对了，只要this指错了，取值结果都不会变。

• jQuery.data()的读取逻辑容易踩坑
  就算你修正了this的指向，也要注意：jQuery的.data()方法会优先读取自己内部缓存的数据集，而非直接读取DOM标签上写的原生data-*属性。如果你只是在拼接HTML字符串时写了data-ref="${i}"，从来没有通过jQuery的.data("ref", 赋值)方法给元素写入对应数据，动态追加的元素第一次通过.data("ref")取值时虽然能兼容读到DOM上的初始属性值，但后续如果修改了DOM上的原生data属性，jQuery读到的还是缓存里的旧值，这部分也容易出现取值异常。

可直接用的修正方案 #

• 低改动量的内联传参方式
  直接把动态生成的索引值通过onclick参数传入函数，完全不依赖this取值：
  把按钮的onclick代码改成：onclick="add_to_storage('${i}')"
  函数定义调整为：

  function add_to_storage(musicIndex) {
    // 直接用传入的参数操作sessionStorage，不需要再取DOM属性
    sessionStorage.setItem("currentMusicRef", musicIndex);
  }
  

• 更稳定的事件委托写法
  彻底抛弃内联onclick绑定，利用jQuery的事件委托给#main下动态追加的按钮绑定监听，回调函数内的this会自动指向被点击的按钮，不会有作用域问题：

  // 页面初始化时只需要绑定一次，后续动态追加的按钮都能正常触发监听
  $('#main').on('click', '.add-music-button', function() {
    // 这里的this就是被点击的按钮，用attr直接读原生DOM属性，绕开jQuery的缓存逻辑
    let musicRef = $(this).attr('data-ref');
    sessionStorage.setItem("currentMusicRef", musicRef);
  })
  

附带的语法问题修正 #

你之前拼接的button标签存在冗余语法错误：<button button type="button" 这里多写了一个无意义的button属性，虽然浏览器会容错解析，但最好去掉冗余内容，改成标准的<button type="button"写法。

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