I'm having trouble updating elements from JavaScript. My project is fairly plex 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.

I'm having trouble updating elements from JavaScript. My project is fairly plex 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.

• javascript
• jquery
• jquery-data

• 1 FYI, newRows is already a jQuery object. You don't have to pass it to jQuery again. What do yo mean by "I don't see the specified attribute on my page"? How are you trying to "see" it? – Felix Kling Commented Mar 27, 2013 at 22:50
• Are you saying I can just do newRows.data()? I thought $() gave me additional options. (I was trying to see it by examining the elements in Chrome.) – Jonathan Wood Commented Mar 27, 2013 at 22:52
• Yep. .clone returns a jQuery object, as does $(). If you already have a jQuery object, you don't have to pass it to $() again (the same might be for rows, but I don't know what it is). You usually do $('div') instead of $($('div')) right? :) – Felix Kling Commented Mar 27, 2013 at 23:03

2 Answers 2

.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).

The setting the data via jQuery .data() does not set the attribute, only the underlying data store. If you want to change the attribute, you have to use .attr().