Anchor Link Inside Label Not Clickable In jQuery Mobile
August 7, 2020 by Andreas Wik
If you, for whatever reason, need to do some work with jQuery Mobile in the 2020s, you may run into this annoying little issue.
When placing an anchor inside of a <label> users won’t be able to click it to go to the destination. Clicking the anchor will just check/uncheck the checkbox which the label is tied to.
A typical example of this could be a mandatory “I accept the Terms & Conditions” checkbox and label.
<fieldset data-role="controlgroup">
<input type="checkbox" id="terms" name="terms" />
<label for="terms">
I accept the <a href="https://awik.io">Terms & Conditions</a>.
</label>
</fieldset>
Luckily this can be fixed with just a couple of lines of jQuery:
// When clicking/tapping anchors inside of parent .ui-checkbox element(s)
$('.ui-checkbox a').bind("tap click", function(event, data){
event.stopPropagation();
// Call jQuery Mobile's changePage function to send user off to the anchor's href destination
$.mobile.changePage($(this).attr('href'));
});
🙂
Share this article
