How to keep data value intact?

Question

I have this basic HTML:

<div id ="div1" data-pagenumber="0001">First page</div>

<div id = "div2"></div>

and my jQuery:

var number = $('#div1').data('pagenumber')

$('#div2').append(number);

Fiddle: http://jsfiddle.net/JabUS/

Why is the text inside div2 set to 1? It seems to me like jQuery auto converted my value. How do I prevent this conversion so it prints like this, 0001?

score 5 · Accepted Answer · answered May 07 '13 at 15:46

You need to use:

var number = $('#div1').attr('data-pagenumber');

because from jQuery docs:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string. To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method

Updated Fiddle

But actually you should be fine if you use jQuery version 1.8+.

How to keep data value intact?

1 Answers1