javascript - 当点击 LI 然后自动点击 input radio

Question

当你点击 li 时，我希望输入单选按钮被点击。

但是，我从 conole 日志中收到一条错误消息:

Uncaught RangeError: Maximum call stack size exceeded

如何解决这个问题？

这里是html代码:

    <ul class="Method">
        <li class="shipping_today active">
           <label> Label 1 </label>
            <input value="shipping_today"  name="shipping" type="radio" />
        </li>
        <li class="shipping_next_month">
            <label> Label 2 </label>
            <input value="shipping_next_month"  name="shipping" type="radio" />
        </li>
    </ul>

J查询:

$(".Method li").click(function() { 
    var thisLi = $(this);
    var radio = $(this).find("input:radio");

    if (radio.val() == "shipping_today") {
        $(".Method li").eq(1).removeClass("active");
        $(this).addClass("active");
    }

    if (radio.val() == "shipping_next_month") {
        $(".Method li").eq(-2).removeClass("active");
        $(this).addClass("active");
    }

    radio.click(); //problem here...
});

我的 jQuery 代码好吗？有什么可以改进的？

谢谢。

Answer 1

这是一个无限循环，因为 click您在单选按钮上触发的事件 bubbles up到 <li>元素并使您的处理程序递归运行。

一个解决方案是只中继 click如果它不是来自单选按钮本身的事件:

$(".Method li").click(function(event) {
    var thisLi = $(this);
    var radio = $(this).find("input:radio");

    // [...]

    if (radio[0] !== event.target) {
        radio.click();
    }
});

但是，如果您只想检查单选按钮，则不需要中继事件。您可以使用 prop()相反:

radio.prop("checked", true);