Trying to simulate label click

Question

Why doesn't this work? The label is inside the .item parent. I don't want to put it outside of block elements as it wouldn't be valid.

So I'm trying to simulate a label click:

$(".item").click(function(){
    $(this).find("label").click();
});

Edit: It's supposed to trigger the label and check a radio.

<script type="text/javascript">
    $(document).ready(function () {
        $(".item").click(function() {
            $(this).find("label").click();
        });
    }); 
</script>


<div class="item">
    <h4>Item</h4>
    <ul>                
        <li>Description</li>
    </ul>
     <div class="radio-container">
        <div class="radio-stack">
            <input type="radio" class="styled" id="item1">
        </div>
        <label for="item1">$100</label>
    </div>
</div>

can you please show your html code ? – Hemant Metalia Jun 07 '12 at 06:42 — Hemant Metalia, Jun 07 '12 at 06:42

mgibsonbr · Accepted Answer · 2012-06-07T09:24:02.327

Since this label is attached to some input (using the for attribute), you could try something like:

var inputID = $(this).find("label").attr("for");
$('#' + inputID).click();

However you should be careful: since your input is inside the div with the .item class, simulating a click in the radio will trigger your custom handler again, causing an infinite loop. If possible, just set the radio checked attribute to true instead of simulating a click:

$('#' + inputID).attr("checked",true);

(Working example at jsFiddle)

Otherwise, you'll need to find a way to exclude that radio from the .item selector to avoid that infinite loop.

Update: after struggling a little with not selectors, unsuccessfully, I came up with a quick and dirty hack: use a global (to the ready closure) variable to control whether or not a simulated click is happening:

var updating = false;
$(".item").click(function() {
    if ( !updating ) {
        var inputID = $(this).find("label").attr("for");
        updating = true;
        $('#' + inputID).click();
        updating = false;
    }
});

Working example here. IMO Ayman Safadi's answer is better, but if you have trouble making it work cross-browsers this alternative could be used as a starting point.

Checking the radio directly was my first idea. But since I use http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js to style my radios it only seems to check it on a second click, that's why I tried to simulate the label click. Now I know why the label idea wasn't working at least. — domino, Jun 07 '12 at 06:56
Ayman Safadi's answer should work better then, but if you still have trouble (for instance, if `stopPropagation` prevents something else in your radio to work) check my updated answer. — mgibsonbr, Jun 07 '12 at 09:26
This solves the cross browser issues, so I'm marking this one as the answer. Thank you. — domino, Jun 07 '12 at 10:40

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

To strictly answer your question, it's not working because it's causing an infinite loop of "clicks", and your browser just kills the event silently.

Run this demo, and look at your JS console: http://jsfiddle.net/bRyR3/

The div is capturing the label click event. In other words, JavaScript interprets your logic like this:

When you click on .item, trigger the label "click" event.

label is inside .item, therefore if label is clicked, so is .item.

When you click on .item, trigger the label "click" event.

label is inside .item, therefore if label is clicked, so is .item.

When you click on .item, trigger the label "click" event.

label is inside .item, therefore if label is clicked, so is .item.

etc...

Working on actual solution.

Solution

$('.item').on('click', function(e) {
    console.log('click');
    $('label', $(this)).trigger('click');
});

$('.item label').on('click', function(e) {
    e.stopPropagation();
});

This will stop .item from capturing label's click event.

Working demo: http://jsfiddle.net/bRyR3/1/

So that's why FF crashes... The actual solution could be very easy - putting the label outside .item. Not perfect but I could work with that. — domino, Jun 07 '12 at 07:10

score 0 · Answer 3 · answered Sep 17 '20 at 09:50

Since this question & answer pops up when looking for a solution, there is a third way to solve this issue:

JQuery allows for custom parameters to be sent to the on() event handlers, by using trigger()

See https://api.jquery.com/trigger/

This means, it's possible to avoid an endless loop by simply telling the event handler that the current event is 'artificial':

$( document ).on( 'click touch', '.item', function( event, artificial ) {
     if( artificial ) return;
     
     $(this).find("label").trigger( 'click', [ true ] );
} );

This has the advantage of not stopping propagation (or relying on it), while also not fumbling around with different input types (checkboxes, radios, texts, etc). It just simulates a click on the label without any additional work on our side or any endless loops.

Trying to simulate label click

3 Answers3

Solution