如何在jQuery中通过自定义data属性获取按钮点击事件？

嘿，我猜你在使用自定义data-input-id属性时遇到了预期之外的问题对吧？别着急，我来帮你梳理几个最容易踩的语法坑，大概率能找到问题所在：

• 属性名的大小写与JS获取方式不匹配
  HTML里的data属性本身是大小写不敏感的，但用JS的dataset API获取时，需要把属性名里的横杠转换成驼峰命名。比如你写的是<input data-input-id="username">，那JS里得用element.dataset.inputId才能拿到值；如果直接写dataset.input-id，JS会把横杠当成减法运算符，直接报错。当然你也可以用element.getAttribute('data-input-id')来获取，这种方式不需要转驼峰，直接写完整属性名就行。

• 属性值的引号遗漏或错误
  如果data-input-id的属性值包含空格、特殊字符（比如&、#），一定要用双引号或单引号包裹起来。比如<input data-input-id=user 123>这种写法会被浏览器解析成data-input-id="user"，后面的123会被当成独立的属性，完全不符合你的预期。正确写法应该是<input data-input-id="user 123">。

• HTML结构里的拼写错误
  很容易不小心写错属性名，比如把data-input-id写成data-inputid（少了横杠）、data-input-id=后面忘记写值，或者多打了空格（比如data- input-id），这些情况都会导致浏览器无法正确识别这个自定义属性，自然也就获取不到你想要的值。

• JS选择器的错误
  如果你用CSS选择器或者querySelector来定位元素，比如document.querySelector('[data-input-id=email]')，如果属性值有特殊字符或者空格，也要给属性值加引号，写成document.querySelector('[data-input-id="email user"]')，否则选择器会失效。

给你一个完整的正确示例参考：

<input type="text" data-input-id="email-user-input" id="demoInput">
<script>
const inputElement = document.getElementById('demoInput');

// 方法1：使用getAttribute
const attrValue1 = inputElement.getAttribute('data-input-id');
// 方法2：使用dataset（驼峰转换）
const attrValue2 = inputElement.dataset.inputId;

console.log(attrValue1, attrValue2); // 都会输出 "email-user-input"
</script>

你可以对照上面的几点逐一检查你的代码，应该就能找到问题所在啦~

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