3

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

3 回答 3

5

由于此标签附加到某些输入（使用for属性），您可以尝试以下操作：

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

但是您应该小心：由于您的输入在类的 div内，因此.item在收音机中模拟单击将再次触发您的自定义处理程序，从而导致无限循环。如果可能，只需将 radiochecked属性设置为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 的答案更好，但如果您无法使其跨浏览器工作，则可以使用此替代方法作为起点。

于 2012-06-07T06:46:11.613 回答
2

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

运行这个演示，看看你的 JS 控制台：http: //jsfiddle.net/bRyR3/

div正在捕获label点击事件。换句话说，JavaScript 会这样解释你的逻辑：

当你点击时.item，触发label“ click”事件。

label是在里面.item，所以如果label被点击，也是.item。

当你点击时.item，触发label“ click”事件。

label是在里面.item，所以如果label被点击，也是.item。

当你点击时.item，触发label“ click”事件。

label是在里面.item，所以如果label被点击，也是.item。

ETC...

致力于实际解决方案。

解决方案

$('.item').on('click', function(e) {
    console.log('click');
    $('label', $(this)).trigger('click');
});

$('.item label').on('click', function(e) {
    e.stopPropagation();
});

​这将停止.item捕获label的click事件。

工作演示：http: //jsfiddle.net/bRyR3/1/

于 2012-06-07T07:08:29.487 回答
0

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

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 ] );
} );

这具有不停止传播（或依赖传播）的优点，同时也不会摸索不同的输入类型（复选框、收音机、文本等）。它只是模拟对标签的点击，无需我们进行任何额外的工作或任何无休止的循环。

于 2020-09-17T09:50:39.467 回答