title: Jquery like .attr("data-iconpos","...") has no effect rendering page
body: <p>Changing an element with Jquery like  .attr("data-iconpos","...") is indeed performed, as can be seen inspecting the element.
  However, it has no effect on the page rendering, which puzzles me (I was expecting the behaviour described in <a href="http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-icons.html" rel="nofollow">http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-icons.html</a>).<br>
  Tested with :   </p>
  
  <ul>
  <li>Chrome Version 39.0.2171.95 m</li>
  <li>Firefox 34.0.5</li>
  <li>IE 11.0.9600</li>
  </ul>
  
  <p>Why is that ? (thanks for alternative solution, still my question is <strong>why does page rendering fails ?</strong> : I am interested to know if I missed something about Jquery).<br>
  I made a code sample available at <a href="http://akelai.fr/iconpos.html" rel="nofollow">http://akelai.fr/iconpos.html</a></p>
  
  <p>Here is the code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;test iconpos&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" width="device-width" content="initial-scale=1 maximum-scale=1 user-scalable=no" /&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      $(document).ready(function() {
        $(window).resize(function() {
          windowResize();
        });
  
        function windowResize() {
          var width = $(window).width();
          if (width &lt; 900) {
            $("#me").attr("data-iconpos", "left");
          } else {
            $("#me").attr("data-iconpos", "right");
          }
        }
      }); //
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body id="theBody"&gt;
    &lt;div data-role="page" id="board" data-theme="b"&gt;
  
      &lt;div data-role="header" data-position="horizontal"&gt;
        &lt;h1&gt;test changing iconpos&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" class="ui-btn"&gt;
        &lt;input type="button" id="me" data-icon="grid" value="Is icon on my left (width &lt; 900px) or my right (width &gt; 900px)"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>