Links not clickable in <label> tags

[pclinger]

Please see below examples:

Standard browser functionality that allows clicking links in labels without auto-checking the related checkbox:
http://patrickclinger.com/github/label-links-without-jqm.html

jQuery Mobile that does not allow the link to be clicked at all, and just checks the box:
http://patrickclinger.com/github/label-links-jqm.html

[mayrs]

This would be extremely useful. Imagine a scenario where you build a checkbox representing a user's acceptance of agb/terms and conditions. This is represented with a checkbox, a corresponding label including a sentence and one or more links within this sentence ("I accept the terms and conditions as well as other conditions."). A click on the links opens the new page but does not opt in the checkbox (e.g. if the sentence contains two links then the checkbox would be unchecked after the user read both of the link contents); on the other hand the checkbox is only opted in when the label area is clicked but not the link itself. The default behaviour for labels could be a click on the label opts in/out the checkbox. The option to follow links could be activated directly on the label element by setting a data-follow-links="true" attribute.

I have currently worked around this issue by catching clicks on link elements within labels, preventing the default behaviour and opening the link in a new subpage via ajax.

[jaspermdegroot]

Since this is not a bug I am closing this issue as a feature request.
@pclinger Do you mind adding it a link to this ticket here https://github.com/jquery/jquery-mobile/wiki/Feature-Requests ?

My personal opinion on this feature is that it's not a good idea to have a link wrapped inside another link (button). On a touch device there is a big chance you hit the link when you want to click the button.

[pclinger]

@uGoMobi -- Done

[MauriceG]

Hi @uGoMobi !
With just a :filter( 'a' ) on the label binding it could work like this: http://jsfiddle.net/MauriceG/9tXE4/show/light/
What do you think?
Maurice

[jaspermdegroot]

hi @MauriceG

If there is no downside to adding that filter, it's fine by me. I would just not recommend using it like this. I think a link inside a button is a bad UI.

[pclinger]

@uGoMobi it's a link inside a , not a button per-se. My exact use case that led me to this problem was trying to add a "I agree to the Terms of Service" checkbox and having 'Terms of Service' linked with a label. Ended up needing to have a separate link to the TOS and then add the checkbox w/label separate, which seemed silly.

[jaspermdegroot]

@pclinger

A link inside an anchor element would be invalid markup:
"The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)."
http://dev.w3.org/html5/spec/single-page.html#the-a-element

We are talking about a link inside a label element. That's valid markup, but in case of JQM the label element of a checkbox gets button behaviour and styling.

I understand why you want to use it like that, but for the reasons I mentioned in my previous comments I wouldn't recommend it. That's just my opinion on good UI and touch-optimized. I think I would go for the separate link or a native checkbox.

[jaspermdegroot]

@MauriceG

If @toddparker is in favor of making links inside checkbox labels possible, can you create a PR for it?
With "no downside" I meant if adding a filter doesn't affect performance in a noticeable way.
Thanks!

Jasper

[toddparker]

I agree with @uGoMobi - if this doesn't impact performance, I'm fine with making this adjustment but it does seem like the UI might not be very usable.

[jaspermdegroot]

@pclinger @mayrs

It has been changed, so you can use anchor elements inside checkbox labels/buttons
Please note that this won't be in 1.1.1. final, which will be released tomorrow.

@MauriceG - Thanks for the PR!

[pclinger]

Much appreciated

[jaspermdegroot]

Update:

I had to revert the change because it broke the tests we run to see if everything is still working as expected.
We have to look into this first.

See also: #4665 (comment)