Trying to simulate label click

domino picture domino · Jun 7, 2012 · Viewed 23.3k times · Source

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>

Answer

mgibsonbr picture mgibsonbr · Jun 7, 2012

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.