javascript - Getting a data attribute after dynamic change - Stack Overflow

I have a simple setup with an attribute 'data-id' attached to the element:

<div class='row' data-id='1'>

If I call alert($(.row).data(id)); I will get my id 1. Next thing I change this id manually or via another script to, say, 2:

<div class='row' data-id='2'>

and now if I call alert($(.row).data(id)); I still will get 1 instead of 2.

However, if I change method .data() to attr('data-id') the result gonna be 2.

What is the reason of such behavior?

I have a simple setup with an attribute 'data-id' attached to the element:

<div class='row' data-id='1'>

If I call alert($(.row).data(id)); I will get my id 1. Next thing I change this id manually or via another script to, say, 2:

<div class='row' data-id='2'>

and now if I call alert($(.row).data(id)); I still will get 1 instead of 2.

However, if I change method .data() to attr('data-id') the result gonna be 2.

What is the reason of such behavior?

• javascript
• jquery
• attr

Share Improve this question Follow edited Mar 16, 2017 at 9:59 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Mar 16, 2017 at 9:51 be wellbe well 34533 silver badges1414 bronze badges 1

• using .data() to store data is stored in different location than using .attr() – guradio Commented Mar 16, 2017 at 9:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

The reason is because jQuery stores all data attribute key/value pairs in an object, separate from the DOM. The data() method reads from this object.

When you update the data attribute using attr() you update the DOM only, hence the data() method reads the old value from the in memory object.

For this reason it's always best to use data() as both the setter and getter.

$(.row).data('id', 'your new value')

Use above setter method to update your data-id value

After when you get $('.row').data('id') then you get your updated value

For Set and Get attribute use data() instead of attr()

<div class='row' data-id='1'>

 

//set attr
$(.row).data("id","NEW_VAL");

//get attr
$(.row).data("id");