试图模拟标签点击

Question

为什么这不起作用？标签位于.item父级内.我不想把它放在块元素之外,因为它不会有效.

所以我试图模拟标签点击:

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

编辑:它应该触发标签并检查收音机.

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

由于此标签附加到某些输入(使用for属性),您可以尝试以下方法:

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

但是你应该小心:因为你的输入在 div的div中,所以.item在收音机中模拟一次点击将再次触发你的自定义处理程序,从而导致无限循环.如果可能,只需设置radio checked属性true而不是模拟点击:

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

(jsFiddle的工作示例)

否则,您需要找到一种方法从.item选择器中排除该无线电以避免无限循环.

更新:在与not选择器稍微挣扎之后,没有成功,我提出了一个快速而肮脏的黑客:使用全局(到ready闭包)变量来控制是否发生模拟点击:

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

这里的工作示例.IMO Ayman Safadi的答案更好,但是如果你在跨浏览器上工作有困难,可以用这个替代品作为起点.