javascript - When clicking on on the LI then automatically click on input radio - Stack Overflow

admin管理员组

文章数量:1389819

When you click on li, I want input radio to be clicked.

However, I am getting an error from conole log saying:

Uncaught RangeError: Maximum call stack size exceeded

How to fix this?

Here the html code:

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

Is my jQuery code good? what can be improved?

thanks.

When you click on li, I want input radio to be clicked.

However, I am getting an error from conole log saying:

Uncaught RangeError: Maximum call stack size exceeded

How to fix this?

Here the html code:

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

Is my jQuery code good? what can be improved?

thanks.

• javascript
• jquery

Share Improve this question Follow asked Oct 16, 2011 at 12:11 I'll-Be-BackI'll-Be-Back 10.8k4242 gold badges118118 silver badges227227 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

That's an infinite loop, because the click event you trigger on the radio button bubbles up to the <li> element and causes your handler to run recursively.

One solution would be to only relay the click event if its doesn't e from the radio button itself:

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

    // [...]

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

If you only want to check the radio button, however, relaying the event is not necessary. You can use prop() instead:

radio.prop("checked", true);

To prevent event bubbling, you can use stopPropagation():

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

Your code needs tweaks, try this:

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

You can place radio.attr() only once outside of condition if all LI tags contain radio buttons.

本文标签： javascriptWhen clicking on on the LI then automatically click on input radioStack Overflow