4

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

2 Answers 2

7

To disable enhancement of a select component you can add data-role='none', tested on jQuery Mobile 1.4.2.

see http://jsfiddle.net/zLZzA/1/

2
  • What if you have 100+ components on a page? Are you going to add that to each and every one?
    – mo5470
    Commented Apr 15, 2015 at 11:36
  • Exactly what I was looking for, thank you. Also works with jQuery Mobile 1.3.2 Commented Sep 1, 2016 at 13:41
6

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";
});  
2
  • Thanks - that worked. However, I'm not using pages, (I just have $(document).on('pagebeforeshow', function () {, so I'm a little confused about how that works (because I don't specify a page to load, although I think JQM will auto create a page). Do you know any links, our could explain, the order in which events are called? Like just a complete timeline when I load a fresh page
    – Raekye
    Commented Feb 16, 2013 at 21:09
  • Yes I do, I have another answer/article about this: stackoverflow.com/a/14469041/1848600
    – Gajotres
    Commented Feb 16, 2013 at 21:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.