Depending on jQuery Mobile version you're using.
Solution 1:
Modify Global Settings on mobileinit, by setting ignoreContentEnabled to true. However, this affects app performance negatively, as it slows down processing/initializing widgets/elements.
<head>
<script src="jQuery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="jQuery-Mobile.js"></script>
<head>
Add data-enhance="false" to elements or div you want to keep untouched by jQM.
<div data-role="content" data-enhance="false">
<!-- elements -->
</div>
<input type="text" data-enhance="false">
Solution 2:
Modify page widget defaults on mobileinit, by setting a .selector for keepNative. The .selector could be a <tag>, an #id or a .class.
jQuery Mobile <= 1.3.x
<head>
<script src="jQuery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.page.prototype.options.keepNative = $.mobile.page.prototype.options.keepNative + ", input, #foo, .native";
});
</script>
<script src="jQuery-Mobile.js"></script>
<head>
jQuery Mobile >= 1.4.x
<head>
<script src="jQuery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.keepNative = $.mobile.keepNative + ", input, #foo, .native";
});
</script>
<script src="jQuery-Mobile.js"></script>
<head>
When page is being created, input, element with #foo ID and elements with native class, will be kept as is.
Demo
