jQuery Mobile disabled adding of `ui-link` to `<a />`

Question

I noticed my links are having ui-link appended to it. Interfering with CSS, as jQuery Mobile has styled it differently. I could overwrite, but all I need is to remove the class. Instead of removing after it has been added, is it possible to prevent jQuery Mobile from adding the class?

One way is http://forum.jquery.com/topic/a-s-still-styled-as-ui-link-despite-being-in-a-container-w-data-role-none but I prefer not to edit jQuery Mobile source

Answer 1

Just glancing at the jQuery Mobile source for v1.1.1... I see that links are enhanced in the pagecreate and create events except for the following:

.not(".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')")

Meaning, you should be able to avoid enhancement by adding a .ui-btn or .ui-link-inherit class, or adding a data-role="none" or data-role="nojs" attribute to the links.

It also calls .jqmEnhanceable() on the links, which in turn calls $.mobile.enhanceable() and checks to make sure it is OK to enhance by traversing the parent elements. Have you tried adding data-role="none" to the links themselves or a wrapper element?

Of course, you can remove the classes after jQuery Mobile has initalized, however, I would advise against this as it may have a negative effect on some of jQM's features. I would venture a guess that jQM uses .ui-link for more than just styling.

$(document).bind('pageinit', function(event){
    $('.ui-link').removeClass('ui-link');
});