Using jquery data() to set data attribute of an element, like so:

HTML:

<div id="some-el" data-number="0"></div>

JQ:

$("#some-el").data("number",1);

As we know, data changes variable internally. So inside inspector you cannot actually see that new value is 1. But this aside, if I do clone on the element with new data value, jquery clones original dom element without current data value!!!

$("#some-el").clone();

Results in <div id="some-el" data-number="0"></div> both internally and visibly!

I was thinking I could avoid this problem by simply using attr("data-number",1);

Anyways, I wanted to ask you if this is correct behaviour of dat()? Is what I'm seeing expected? and WHY?

Using jquery data() to set data attribute of an element, like so:

HTML:

<div id="some-el" data-number="0"></div>

JQ:

$("#some-el").data("number",1);

As we know, data changes variable internally. So inside inspector you cannot actually see that new value is 1. But this aside, if I do clone on the element with new data value, jquery clones original dom element without current data value!!!

$("#some-el").clone();

Results in <div id="some-el" data-number="0"></div> both internally and visibly!

I was thinking I could avoid this problem by simply using attr("data-number",1);

Anyways, I wanted to ask you if this is correct behaviour of dat()? Is what I'm seeing expected? and WHY?

• javascript
• jquery
• html

• I think you'll find your answer here! stackoverflow./questions/122102/… – Magnus Engdal Commented Dec 17, 2013 at 11:39
• All is explain here: api.jquery./clone – A. Wolff Commented Dec 17, 2013 at 11:40

2 Answers 2

I think clone can accept a boolean to indicate a Clone with data and events, so Clone(true) should work: http://api.jquery./clone/

Here's a fiddle that works: http://jsfiddle/2pdNL/

.data() is not setting the value in DOM.

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)

But here is a workaround, instead of using

$("#some-el").data("number",1);  

Interact directly to DOM like

$("#some-el").attr("data-number",1);

JSFiddle

Also check this answer