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

Question

這是我試圖讓一個名爲productId的HTML5數據屬性：

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

我有幾個按鈕與類myButton，各有不同的productId，這是他們的數據。

但是在這種情況下，代碼只是從主體標籤中查找數據，而不是從類別爲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 a中的變化ND 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); 
}); 

DEMO

Answer 2

也許somethig這樣嗎？

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