title: Generating jQ button from javascript for jQuery mobile pages to reduce repetition
body: <p>I have a "home" button in the headers with this "standard" code at many places:</p>
  
  <pre><code>&lt;a href="#home" 
      data-role="button" 
      data-iconpos="right"
      data-icon="home" 
     class="ui-btn-right"&gt;
     home&lt;/a&gt;
  </code></pre>
  
  <p><strong>I want to render it from  a single piece of javascript code  since it appears many times in index.html</strong> - to decrease code redundancy and for easier changes. (I want to  use jQuery so the cross browser functionality is ok) </p>
  
  <p>The code bellow should :) work, what am I doing wrong ? </p>
  
  <p>(I tried to solve it from different angles, I can write out text, put out other html etc. - but I can not tackle data-* and standard html attr together)</p>
  
  <p><strong>THE CODE:</strong></p>
  
  <p><em>in index.html:</em></p>
  
  <pre><code>&lt;div  data-role="header"&gt;
      &lt;a data-myButton="headerHome&gt; &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>in main.js :</em></p>
  
  <pre><code>$( function () {    
      // put home button into the headers:        
      $("a[data-mybutton = 'headerHome']").( function () {
          $(this).href = "#home";             
          $(this).data("role","button");
          $(this).data("iconpos","right");
          $(this).data("icon","home");
          $(this).class("ui-btn-right");      
      })
  })
  </code></pre>
  
  <p>I call main.js as a last js file in my index.html</p>