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

Answer 1

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)