jQuery .data() Not Updating DOM
<p>It seems jQuery 1.7.2 isn't updating the DOM data attributes for me. Given the following markup:</p>

<pre><code>&lt;ul id="foo"&gt;
    &lt;li data-my-key="12345"&gt;ABCDEF&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Running the JavaScript below, I get some results I'm not expecting:</p>

<pre><code>$('#foo li:first').data('my-key') // Returns 12345 - Expected
$('#foo li[data-my-key="12345"]') // Returns the expected &lt;li&gt;
$('#foo li:first').data('my-key', '54321')
$('#foo li:first').data('my-key') // Returns 54321 - Expected
$('#foo li[data-my-key="54321"]') // Returns an empty array - Not expected
</code></pre>

<p>Upon further investigation, I noticed the DOM has <strong>not</strong> been modified after setting a new value using the .data() function (verified with "Inspect Element" in Chrome 21.0.1180.81, Firebug 1.10.3 and Firefox 14.0.1).</p>

<p>The behavior is unexpected from my prospective, but is this the intended way for jQuery data to function? If so, what is the appropriate way to update data-* attributes with jQuery? Simply use the attr() function?</p>
