A fellow colleague was having an issue with a JQuery Mobile application which was creating an extra div element when he simply wanted a input text box or input checkbox.
The source code looked like this:
<input class="asdf" type="checkbox" name="asdf">
The HTML source code in the browser however was adding an extra div by wrapping it up like this which was causing the visual formatting to display the check box on a new line. Very annoying.
<div> <input type="checkbox" name="asdf"> </div>
Solved: Solution was quite simple.
Add an attribute called data-role to the input element and give it the value of “none” like this.
eg<input type="checkbox" name="asdf" data-role="none">
This stops jQuery mobile trying to work its magic on that particular element which was fine just the way he initially wrote it.