Response title
This is preview!
A's still styled as "ui-link" despite being in a container w data-role='none'
in jQuery Mobile
•
12 years ago
I noticed while trying to bring in another widget that did its own A tag styling that the JQM enhancer applies its class='ui-link' to my A tags even though they are in a DIV that has data-role='none' which is supposed to stop the enhancer from "going deep": ie. leave the enclosed markup alone:
<div data-role='none'>
<a href='...' class='ui-link'>foo</a>
<a href='...' class='ui-link'>bar</a>
</div>
Looking through the jquery.mobile.js source (around #1130), it is clear that A tags get enhanced globally, without regard for data-role enclosure hierarchy:
//links within content areas
$elem.find( "a:not(.ui-btn):not(.ui-link-inherit)" )
.addClass( "ui-link" );
A quick hack around it is to add
<a href='...' class='data-role-none'>foo</a>
to each A tag and to modify the jquery.mobile.js to read:
//links within content areas
$elem.find( "a:not(.ui-btn):not(.ui-link-inherit):not(.data-role-none)" )
.addClass( "ui-link" );
Not particularly elegant, I apologize. But it works. Perhaps A markup will eventually become part of the enhancer traversal rather than applied globally in which case this hack becomes obsolete.
1