3

Could someone explain why this isn't working?

What I'm trying to do is update a data attribute called 'section_id' in a dropped element with the new section it has been dropped into. I check this data attribute when dropping so that they aren't able to drop it into the section it's already in. So naturally, if they drop it in a new section, I want that section id updated.

I have a div like so:

<div class="draggable" data-section_id="413">...</div>

I'm tracking what the value is doing like so:

alert(newTaskRow.find('.draggable').data('section_id')); //returns 413
newTaskRow.find('.draggable').data('section_id','999');
alert(newTaskRow.find('.draggable').data('section_id')); //returns 999
alert(newTaskRow.find('.draggable').html());

But the HTML still shows:

<div class="draggable" data-section_id="413">...</div>

Why isn't the value being updated in the HTML? And how would I do that?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Phil Freeman
  • 246
  • 3
  • 14
  • See http://stackoverflow.com/questions/5507718/why-dont-changes-to-jquery-fn-data-update-the-corresponding-html-5-data-a?lq=1 and http://stackoverflow.com/questions/6827810/unable-to-set-data-attribute-using-jquery-data-api?rq=1 – Andrew Whitaker Apr 04 '14 at 16:26

1 Answers1

14

jQuery's data() does not update the attributes, it sets an internal data object, but uses the data attribute as the default value only

If for some reason you have to update the HTML5 data attribute, use attr()

.attr('data-section_id','999')
adeneo
  • 312,895
  • 29
  • 395
  • 388