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();

但是你应该小心：因为输入里面带有.item类的div，模拟收音机中的点击会再次触发你的自定义处理程序，导致无限循环。如果可能，只需将广播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;
    }
});

工作示例here。 IMO Ayman Safadi的答案更好，但是如果你在跨浏览器上工作有困难，这个替代方案可以用作起点。

Answer 2

要严格回答你的问题，它不起作用，因为它会导致无限循环的“点击”，而你的浏览器只是默默地杀死了这个事件。

运行此演示，并查看您的JS控制台：http://jsfiddle.net/bRyR3/

div label .item点击事件label。换句话说，JavaScript会像这样解释你的逻辑：

点击click后，触发label“.item”活动。

label位于.item内，因此如果点击.item，label也是如此。

点击click后，触发label“.item”活动。

label位于.item内，因此如果点击.item，label也是如此。

点击click后，触发label“.item”活动。

label位于.item内，因此如果点击$('.item').on('click', function(e) { console.log('click'); $('label', $(this)).trigger('click'); }); $('.item label').on('click', function(e) { e.stopPropagation(); });，.item也是如此。

等...

制定实际解决方案。

解决方案

label

这将阻止click捕获{{1}}的{{1}}事件。

工作演示：capturing

Answer 3

由于在寻找解决方案时会弹出此问题与答案，因此有第三种解决方法：

JQuery允许使用trigger（）将自定义参数发送到on（）事件处理程序

请参见https://api.jquery.com/trigger/

这意味着，可以通过简单地告诉事件处理程序当前事件是“人造”事件来避免无限循环：

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

这具有不停止传播（或依靠它）的优点，同时也不会弄乱不同的输入类型（复选框，单选按钮，文本等）。它只是模拟标签上的点击，而无需我们做任何额外的工作或无休止的循环。

试图模拟标签点击

3 个答案:

解决方案