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

Question

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

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

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

但是在这种情况下，代码只是从 body 标记中查找数据，而不是从带有 class 的按钮中查找数据myButton。

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

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

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

score 2 · Accepted Answer

使用 jQuery 直到 1.4 版（包括 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"/>

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

试试这个：

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

score 0 · Accepted Answer

也许是这样的？

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

2 回答 2