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