Using jQuery up to and including version 1.4, data attributes were case insensitive, therefore:
<input type="button" class="myButton" value="click me" data-productId="abc"/>
would be accessible with
$('.myButton').data('productId');
jQuery 1.5 and 1.6
However, changes in jQuery 1.5 and 1.6 mean that data attributes are now forced to lowercase, so:
<input type="button" class="myButton" value="click me" data-productId="abc"/>
is only accessible with
$('.myButton').data('productid');
Although there is a bug in jQuery 1.5 and later
that prevents us from upgrading the version of jQuery.
Therefore, you should avoid using camel-cased data attributes in your HTML, and stick to all lowercase attributes such as
<input type="button" class="myButton" value="click me" data-productid="abc"/>
or use dashed attributes such as
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
and then expect to deal with .data()
items of 'productid'.
Try this:
$('body').on("click", '.myButton', function() {
var productId = $(this).attr('data-productId');
alert(productId);
});