jQuery Mobile disable enhancement on certain tags?

css, html, javascript, jquery, jquery-mobile

Solution

There are few ways of disabling markup enhancement in `jQuery Mobile` but in your case there's only one single line solution:

$(document).on('pagebeforeshow', '#index', function(){       
   $('a').removeClass('ui-link');
});

`jsFiddle` example: http://jsfiddle.net/Gajotres/L4KUT/

Other solutions can be found in my other ARTICLE, to be transparent it is my personal blog. Or find it HERE. Search for the chapter called: Methods of markup enhancement prevention.

There you will find a answer how to disable it on a selector level, unfortunately it only works on native form elements and a tag is not a native form element:

$(document).bind('mobileinit',function(){
     $.mobile.page.prototype.options.keepNative = "select, input";
});  

Problem

I don't want the styles for the `<a>` tag. I've found threads like this How to "turn off" jQuery Mobile's styling of <select> drop downs? but I don't want to be adding `data-enhance=false` to every anchor I have. I was also hoping `linkBindingEnabled` would work (from http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html), as in it wouldn't add custom classes to the `<a>` tag. I could delete the definitions in the CSS file, but I'd prefer a programmatic way to do it. For example, I comment out `.ui-body-c .ui-link` (the default link), but then my links in the footer are still enhanced. And I'm sure there are other little cases, and I don't want to make it messy (although sometimes that's the only option) Basically, is there a way to disable enhancement for a "selector" of elements? Instead of manually adding `data-enhance=false`

Original source

Related problems