Unable to Set Element Attribute Using jQuery data()

Question

I'm having trouble updating elements from JavaScript. My project is fairly complex but here's a tiny piece of it:

myWebService(/*...*/)
.done(function (result) {
    var newRows = $(rows).clone();
    $('#drop-placeholder').after(newRows);
    $(newRows).data('test', 'ZZZZZZZZZZZZZZZZZZZZZZZ');
}

Using Chrome, I can watch these statements execute. However, with newRows in the watch window, I can see that the attribute never gets added/updated. And, sure enough, after the call is done, I don't see the specified attribute on my page.

Can anyone see what I might be missing. rows (and therefore newRows) represents any number of table row elements.

Answer 1

.data() sets background data that is handled purely by jQuery - it does not set HTML attributes.

If you are trying to set an attribute such as data-test in <div data-test="stuff"></div> you need to use .attr("data-test", variable).