Methods of markup enhancement prevention:

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

• Method 1:

  
  
  

  It can do it by adding this attribute:

  
  
  

  data-enhance=false
  
  

  
  
  

  to the header, content, footer container.

  
  
  

  This also needs to be turned in the app loading phase:

  
  
  

  $(document).on(mobileinit, function () {
  
      $.mobile.ignoreContentEnabled=true;
  
  });
  
  

  
  
  

  Initialize it before jquery-mobile.js is initialized (look at the example below).

  
  
  

  More about this can be found here:

  
  
  

  http://jquerymobile.com/test/docs/pages/page-scripting.html

  
  
  

  Example: http://jsfiddle.net/Gajotres/UZwpj/

  
  
  

  To recreate a page again use this:

  
  
  

  $('#index').live('pagebeforeshow', function (event) {
  
      $.mobile.ignoreContentEnabled = false;
  
      $(this).attr('data-enhance','true');
  
      $(this).trigger(pagecreate)
  
  });
  
  




• Method 2:

  
  
  

  Second option is to do it manually with this line:

  
  
  

  data-role=none
  
  

  
  
  

  Example: http://jsfiddle.net/Gajotres/LqDke/




• Method 3:

  
  
  

  Certain HTML elements can be prevented from markup enhancement:

  
  
  

   $(document).bind('mobileinit',function(){
  
        $.mobile.keepNative = select,input; /* jQuery Mobile 1.4 and higher */
  
        //$.mobile.page.prototype.options.keepNative = select, input; /* jQuery Mobile 1.4 and lower */
  
   });    
  
  

  
  
  

  Example: http://jsfiddle.net/Gajotres/gAGtS/

  
  
  

  Again initialize it before jquery-mobile.js is initialized (look at the example below).

Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content