Anchor Link Inside Label Not Clickable In jQuery Mobile

August 7, 2020 by Andreas Wik

jquery mobile links not clickable inside of label

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'));
});

 

🙂

 

 

Recommended reading

Share this article