Is it possible to use links in a JQuery Mobile Form Label?

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

Answer 2

Had the same problem and solved it using:

$('.ui-btn-text a').click(function(event) {
    var $this = $(this);
    window.open($this.attr('href'), $this.attr('target'));     
});

So if any link within a button-text is clicked it will be opened in a new window. If you want it in the same window just use $.mobile.changePage as Phil showed.

Answer 3

I tried the above mentioned solutions on jQuery Mobile 1.1.0 with jQuery 1.7.2 without success.

After a bit of tinkering and reading into the new jQuery event functions I came up with my own solution to make all anchors in labels clickable without loosing jQuery Mobile default behaviour on the rest of the label:

jQuery('label').each(function(){
    var e = jQuery(this).data('events');
    jQuery('.agree label').undelegate();
    jQuery('.agree label *:not(a)').delegate(e);
});