Question

I’m using the following code to access an HTML data attribute:

HTML

<p class="add-favorites-to-list">
  <a href="#" data-baskettype="order"><img src="/style/icons/cart_add.png"> Test1</a>
  <a href="#" data-baskettype="quote"><img src="/style/icons/calculator_add.png"> Test2</a>
</p>

JS

$(document).ready(function() {
  $('.add-favorites-to-list').show();
  $('.add-favorites-to-list a').click(function() {
    alert($(this).data('baskettype'));
    return false;
  });
});

CSS

.add-favorites-to-list { display: none; }

Example: http://jsfiddle.net/mR8gK/1/

Which works fine on jsFiddle, however it doesn’t work in my site (with the same code and the same browser). I get an undefined in the alert().

I’ve checked if jQuery finds the element and it does, because: console.log($(this).html()); shows the contents of the element.

Is there any (obvious) reason why that code wouldn’t work in my site but does work on jsFiddle?

Answer 1

What version of jQuery are you running? Because if you drop it below 1.4.4 it comes back as undefined.