jQuery $(this).data() is returning old values : <p>I have the following code:</p>

<pre><code>updateColors = function() {
  $(".color-preview").each(function() {
    return $(this).css('background-color', $(this).data('color'));
  });
  return null;
};
</code></pre>

<p>I put a breakpoint on the 3rd line, and type the following into the console:</p>

<pre><code>&gt; this
&lt;div class=​"color-preview" data-observer=​"{"attr":​"data-color", "observe":​"btn_col"}​" data-color=​"#ffff00" style=​"background-color:​ rgb(153, 0, 255)​;​"&gt;​&lt;/div&gt;​

&gt; $(this).data('color')
"#9900ff"
</code></pre>

<p>As you can see, the actual element's <code>data-color</code> is <code>#ffff00</code>. However, jQuery's <code>.data()</code> method is returning <code>#9900ff</code>, which <em>was</em> the value of the element's <code>data-color</code>, but has been changed (and using the breakpoint, I can see that yes it has already changed).</p>
