jQuery Data function returns 'undefined'

Question

I have the following HTML:

<a href="#" data-secID="1901">
  <img src="pencil.png" title="Edit" />
</a>

And the following jQuery that I expect to alert the secID of 1901 to the screen, but instead alerts 'undefined' to the screen.

$(document).on("click", "a[data-secID]", function ($e) {
  alert($(this).data('secID'));
  $e.preventDefault();
});

Why am I get 'undefined' instead of 1901?

Kevin B · Accepted Answer · 2013-02-26T20:30:22.367

3

It appears as though the attribute name is converted to lowercase. Try this:

$(document).on("click", "a[data-secID]", function ($e) {
  alert($(this).data('secid'));
  $e.preventDefault();
});

edited Feb 26 '13 at 20:30

answered Feb 26 '13 at 20:22

Kevin B

Wow... that's insane! Since when was case-sensitivity even a consideration with anything jQuery related? Anyway, thanks a ton for the answer. I never would have found this. I'll mark this as correct in about 10 minutes (or whenever SO lets me). – Jagd Feb 26 '13 at 20:26
I don't know, i skimmed through the documentation and didn't see anything related to the case of the keys. – Kevin B Feb 26 '13 at 20:27
Just out of curiosity - how did you figure out that it requires all lowercase to find the data-secID attribute value? – Jagd Feb 26 '13 at 20:28
2

From the docu _"3.2.3.9 Embedding custom non-visible data with the data-* attributes - A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains **no** uppercase ASCII letters."_ - [w3.org](http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes) – Andreas Feb 26 '13 at 20:28
@kevin, you nailed it! http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#case-sensitivity-and-string-comparison section 2.4.3 specifies that the attribute key is to be case insensitive.. – ilan berci Feb 26 '13 at 20:28
I first copied your code into jsfiddle expecting it to work, but it didn't, so i used `console.log( $(this).data() );` to see what data was defined on the element. – Kevin B Feb 26 '13 at 20:29

benzonico · Answer 2 · 2013-02-26T20:29:09.573

0

[Edited after comments] A (not so good) workaround is to use

.attr('data-secID')

instead of

.data('secID)

edited Feb 26 '13 at 20:29

answered Feb 26 '13 at 20:23

benzonico

1

Even with that edit, that doesn't answer his question. He likely wants to use `data` for a reason. Yes it is a work-around and does work, but it doesn't answer his question. Read the full documentation on `data` and it will show you why it's useful beyond the similarities to `attr`. – Eli Gassert Feb 26 '13 at 20:25
@EliGassert good shot and thanks for the correction, i'll precise this is a workaround in my answer : http://stackoverflow.com/questions/9444679/jquery-data-vs-attrdata – benzonico Feb 26 '13 at 20:28

2 Answers2