Search code examples
jqueryjquery-eventsevent-capturing

Trying to simulate label click


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>

Solution

  • 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.