如何通過.on方法訪問JQuery HTML5數據屬性？

Question

這是我嘗試獲取名為productId的HTML5數據屬性：

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

我有幾個按鈕類myButton ，每個按鈕都有不同的productId作為他們的數據。

但在這種情況下，代碼只是查找body標簽中的數據，而不是來自myButton類的myButton 。

如何指定要提取數據的DOM元素？

理想情況下，這應該首先適用於我，但由於某種原因，它不是：

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

Answer 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中使用camel-cased數據屬性，並堅持使用所有小寫屬性，例如

<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);
});

DEMO

Answer 2

也許像這樣的一些人？

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