jQuery selectors and HTML5 data-* attributes set dynamically

Question

I have this working:

  <div data-people="australian">Australian people eats...</div>

  <script type="text/javascript">
    alert($("[data-people=australian]").html());
  </script>

But this other doesn't work and I don't know how to solve:

  <div id="mich">Australian people eats...</div>

  <script type="text/javascript">
    $("#mich").data("people", "australian");

    alert($("[data-people=australian]").html());
  </script>

Why I can't set the data-* HTML5 attributes from jQuery and the use them to select a DOM object???

Lot of thanks

Is your question "why" or "how to solve"? Maybe look at stackoverflow.com/questions/13094777/…. — pimvdb
– pimvdb, Commented Dec 26, 2012 at 8:44
possible duplicate of Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes? — itsadok
– itsadok, Commented Dec 26, 2012 at 8:48

itsadok · Accepted Answer · 2012-12-26 08:51:21Z

37

The data- attribute to jQuery data() mapping is one-direction. You should use the attr() function if you want to actually set the attribute on the node.

$("#mich").attr("data-people", "australian");

From the docs:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)

edited Dec 26, 2012 at 8:51

answered Dec 26, 2012 at 8:42

itsadok

29.5k32 gold badges133 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vala Over a year ago

It's pretty insane that jQuery's own selector for data doesn't take this in to account and checks its data cache. Makes .data() less useful and the source of hard to track down bugs.

Romeo Sierra Over a year ago

Saved a steaming pile of hot mess! :D .data() is really actually useless it seems.

Collectives™ on Stack Overflow

jQuery selectors and HTML5 data-* attributes set dynamically

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related