如何通过 .on 方法访问 JQuery HTML5 数据属性？答案

【问题标题】：How to access JQuery HTML5 data attribute via the .on method?如何通过 .on 方法访问 JQuery HTML5 数据属性？
【发布时间】：2014-03-31 02:42:32
【问题描述】：

这是我尝试获取名为 productId 的 HTML5 数据属性：

$('body').on("click", '.myButton', function () {
    var productId = (this).dataset.productId;
});

我有几个带有 myButton 类的按钮，每个按钮都有不同的 productId 作为它们的数据。

但在这种情况下，代码只是从body标签中寻找数据，而不是从myButton类的按钮中寻找。

如何指定要提取数据的 DOM 元素？

理想情况下，这首先应该对我有用，但由于某种原因它不是：

 $('.myButton').on("click", null, function () {
        var productId = (this).dataset.productId;
 });

【问题讨论】：

在(this)之前添加$
如果你搜索，这里肯定有成千上万的问题和答案告诉你如何使用data()或attr()获取数据属性，你为什么要使用dataset？跨度>
你能把按钮的HTML贴出来吗？
"但是在这种情况下，代码只是从 body 标记中查找数据，而不是从 myButton 类的按钮中查找数据。"，这不是真的， this 指的是被点击的元素。
@undefined 你是对的。谢谢。现在这可以使用 attr 作为发布的答案。

【解决方案1】：

使用 jQuery 1.4 及以下版本，数据属性不区分大小写，因此：

<input type="button" class="myButton" value="click me" data-productId="abc"/>

可以通过

访问

$('.myButton').data('productId');

jQuery 1.5 和 1.6

然而，jQuery 1.5 和 1.6 的变化意味着数据属性现在被强制小写，所以：

<input type="button" class="myButton" value="click me" data-productId="abc"/>

只能通过

访问

$('.myButton').data('productid');

虽然jQuery 1.5 and later 中有一个错误阻止我们升级 jQuery 的版本。

因此，您应该避免在 HTML 中使用驼峰式数据属性，并坚持所有小写属性，例如

<input type="button" class="myButton" value="click me" data-productid="abc"/>

或使用虚线属性，例如

<input type="button" class="myButton" value="click me" data-product-id="abc"/>

然后期望处理“productid”的.data() 项。

试试这个：

$('body').on("click", '.myButton', function() {
    var productId = $(this).attr('data-productId');
    alert(productId);
});

【讨论】：

【解决方案2】：

也许像这样？

  $('body').on("click", '.myButton', function () {
       var productId = $(this).data("productId");
  });

【讨论】：