Anchor Link Inside Label Not Clickable In jQuery Mobile
August 7, 2020 by Andreas Wik
![jquery mobile links not clickable inside of label](https://awik.io/wp-content/uploads/2020/08/napoleon-computer.jpg)
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'));
});
🙂