Extra container appearing around button in jQuery Mobile 1.4.2

Question

I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.

This is the code I'm using (note that the problem doesn't appear in jsFiddle):

<div data-theme="a" data-role="page">    
    <div role="main" class="ui-content">
        <button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
    </div>
</div>

And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div

How do I get rid of the extra div?

Answer 1

As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.

input is converted into a div that holds all styles.

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
  Submit
  <input type="submit" value="Submit">
</div>

If you call .button() on <a> or <button> tags, they will be wrapped in a div.