title: How do i define Jquery button styles?
body: <p>I have been working on a jquery mobile page and it has several buttons on it that have unique styles for example:</p>
  
  <p>As part of a sort of client side "jquery driven wizard" have ...</p>
  
  <pre><code>&lt;button data-function="back" class="back"&gt;Back&lt;/button&gt;
  &lt;button data-function="next" class="next"&gt;Next&lt;/button&gt;
  &lt;button data-function="submit" class="submit"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>... depending on where you are in the wizard these buttons are shown / hidden.</p>
  
  <p>Not a problem ... until I get to the styles.
  JQuery takes it upon itself to "wrap my button and hide it" so i end up with something that looks like ...</p>
  
  <pre><code>&lt;div class="ui-btn ..."&gt;    
     &lt;span class="ui-btn-inner ..."&gt;Back&lt;/span&gt;
     &lt;button class="back"&gt;Back&lt;/button&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>As stated above, it hides my button, and my custom style for the back button is then effectively lost.
  I don't want to style all buttons just my custom ones. </p>
  
  <p>I thought about using some JQuery to move my custom style to the parent "div" element as part of a doc ready script but this just seems stupid to have to do for each button and the logic could get quite complex or long winded if I have to do this every time i want a different button type.</p>
  
  <p>Is there a standard way of saying "JQuery, I want this class applied to the button element(s) you generate ... " or is this a bug?</p>
  
  <p>I have noticed that others avoid using this aproach altogether for example ...
  <a href="http://m.nationalrail.co.uk/pj/home" rel="nofollow">http://m.nationalrail.co.uk/pj/home</a></p>
  
  <p>Visiting the official JQuery mobile page on buttons appears to exhibit the same behaviour:
  <a href="http://jquerymobile.com/demos//1.2.0/docs/buttons/buttons-types.html" rel="nofollow">http://jquerymobile.com/demos//1.2.0/docs/buttons/buttons-types.html</a></p>
  
  <p>(remember to change your browser agent to a mobile device before visiting)</p>
  
  <p>Any ideas?
  Ideally I want to avoid "hacking" the styles to the right element with some JQuery of my own to avoid slowing the page down and introducing more code I then have to maintain just because I want a blue and an orange button next to each other.</p>
  
  <p>Trouble is this is for our corporate main landing page so the style is considered quite important.</p>
  
  <p>Edit for @Gajotres:</p>
  
  <p>Adding another theme may solve the problem but my remit for this page is for it to perform as quickly as possible and loading up the page with multiple themes would mean more loading time. </p>
  
  <p>I have considered something like this as being a possible solution but I think that JQuery should be already doing this so my thought was that maybe i'm doing something wrong ...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     var allButtons = $(button);
     allButtons.each(function() { 
        var css = $(this).className;
        $(this).prev().addClass(css);
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>This would result in me applying any classes on the button to the span tag that jquery has generated and is now showing in it's place.
  I would then need to append some further functionality to ensure that I selectively copy of over certain classes (just dumb imo).</p>
  
  <p>Taking the JQuery aproach here i could add something like ...</p>
  
  <pre><code>data-customStyle="myClass" 
  </code></pre>
  
  <p>... to each button i want to style then use something like ...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     var customButtons = $("data-customStyle");
     customButtons.each(function() { 
        $(this).prev().addClass($(this).data("customStyle"));
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>... to append the style to the "jquery tag that represents the button".</p>
  
  <p>My thought on this ...
  WTF?!?!</p>
  
  <p>JQuery is all about making life easier not harder surely?
  I shouldn't have to "post hack add in" stuff to do what I basically already did on the server and JQuery broke.</p>
  
  <p>Is this a bug in JQuery?</p>