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>

Jquery的：

$(".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(); } });事件：

radio.prop("checked", true);

但是，如果您只想检查单选按钮，则无需中继事件。您可以改为使用prop()：

{{1}}

Answer 2

要防止事件冒泡，可以使用stopPropagation（）：

$(".Method li").click(function(evt) {
    evt.stopPropagation();
    ...
});

Answer 3

你的代码需要调整，试试这个：

$(".Method li").click(function() { 

    var thisLi = $(this);
    var radio = $(this).find("input:radio");

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

        radio.attr("checked", true);
    }

    else if (radio.val() == "shipping_next_month") {
        $(".Method li").eq(0).removeClass("active"); 
        thisLi.addClass("active");

        radio.attr("checked", true);
    }
});

如果所有LI标签都包含单选按钮，则只能将radio.attr（）放置在条件之外一次。

点击LI然后自动点击输入广播

3 个答案: