使用html jQuery对象时jQuery .data不起作用

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>

Answer 1

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');