Question

I have just encountered a strange problem when using jQuery Mobile.

I have a link inside a form element label – a checkbox label to be exact but the link does not work.

I have tried reading the docs but can’t seem to find anything on it.

Here is my markup:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
        <label for="OptIn">Receive E-mails From Us</label>

       <input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
       <label for="tandc">I agree to the <a href="/tandcs.html" target="_BLANK" >Terms & Conditions</a></label>   
   </fieldset>
</div>

When the link is clicked it just toggles the checkbox state.

UPDATE

Just realised I can open the link by right clicking but obviously on a mobile device that’s not very useful….

Answer 1

this is the correct solution for mobile and non mobile browsers

$('.ui-checkbox a').bind("tap click", function( event, data ){
    event.stopPropagation();
    $.mobile.changePage($(this).attr('href'));
});