title: JQuery data function returns the wrong value
body: <p>I have an input text which one of its <code>data</code> attribute is changed on the fly as soon as my view model changes ( thanks to Knockout).
  The binding is done as follow:</p>
  
  <pre><code>&lt;input data-bind="attr:{'data-customitem': customItemId}" /&gt;
  </code></pre>
  
  <p>Somewhere in my view model, I have a function which accesses the input and retrieves the <code>data-customitem</code> attribute value. </p>
  
  <p>The first time the input is bound, it gets an id, say <code>X</code>. So the HTML looks like this:</p>
  
  <pre><code>&lt;input data-bind="attr:{'data-customitem': customItemId}" data-customitem='X'/&gt;
  </code></pre>
  
  <p>Then my model changes and knockout updates the attribute value to <code>Y</code>. The HTML now looks like this:</p>
  
  <pre><code>&lt;input data-bind="attr:{'data-customitem': customItemId}" data-customitem='Y'/&gt;
  </code></pre>
  
  <p>The problem now is:</p>
  
  <p><code>$element.data("customitem")</code> returns <code>X</code></p>
  
  <p><code>$element.attr("data-orderitem")</code> returns <code>Y</code>  </p>
  
  <p>Why is jQuery data function returning an old value of the data attribute? Is there any caching going on behind the scenes? </p>