title: Updating HTML data attribute correctly but changes not being displayed on page
body: <p>I have this HTML:</p>
  
  <pre><code>&lt;input type="text" id="query" data-source="whatever"&gt;
  </code></pre>
  
  <p>I have some jQuery that changes the data attribute successfully i.e. "whatever" changes to "test"</p>
  
  <pre><code>$(function() {
      $('#query').data('source', 'test');
      console.log($('#query').data());
  });
  </code></pre>
  
  <p>but if I inspect the page using Chrome, the data attribute has not been updated in the element.. I can print it in console, but I can't inspect the new value!  Very confusion.  Any ideas?</p>
  
  <p>here is the <a href="http://jsfiddle.net/r5YV9/7/" rel="nofollow noreferrer"><strong>fiddle</strong></a> </p>