jQuery .data doesn't work when using a html jQuery object

Question

I am having a problem using the .data jQuery function for a HTML jQuery Object.

var test = $('<div><div class="abc123"></div></div>');
test.find('.abc123').data('please', 'change');

and test still hasn't changed at all

<div>
    <div class="abc123"><div>
</div>

But using the .text function

test.find('.abc123').text('TESTING');

works properly:

<div>
    <div class="abc123">TESTING</div>
</div>

Is there any way to make the data work on the test var?

Edit:

What i am expecting after running

test.find('.abc123').data('please', 'change');

is

<div>
    <div class="abc123" data-please="change"></div>
</div>

I am expecting it to show <div class="abc123" data-please="change"></div> — Arian Faurtosh
– Arian Faurtosh, Commented Jan 10, 2015 at 3:55
jQuery's .data() method doesn't change the attribute but is managed internally by jQuery. — j08691
– j08691, Commented Jan 10, 2015 at 3:57

Nathan Taylor · Accepted Answer · 2015-01-11 01:22:27Z

3

Calling .data() on an element, whether created in HTML or in a JQuery object will not modify the associated markup. Regardless, the associated DOM properties are updated.

var test = $('<div><div class="abc123"></div></div>');
test.find('.abc123').data('please', 'change');

alert(test.find('.abc123').data('please'));

The above code will alert 'change'.

If your goal is to also update the markup, you could instead use:

test.find('.abc123').attr('data-please', 'change');

edited Jan 11, 2015 at 1:22

answered Jan 10, 2015 at 3:56

Nathan Taylor

24.7k20 gold badges102 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arian Faurtosh Over a year ago

Oh this is interesting, just checked this, and you are right! Thank you!

Collectives™ on Stack Overflow

jQuery .data doesn't work when using a html jQuery object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related