Po kliknięciu LI, chcę kliknąć radio wejściowe.

Jednak otrzymuję błąd z dziennika konsoli:

Uncaught RangeError: Maximum call stack size exceeded

Jak to naprawić?

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

Czy mój kod jQuery jest dobry? Co można poprawić?

Dzięki.

5
I'll-Be-Back 16 październik 2011, 16:11

3 odpowiedzi

Najlepsza odpowiedź

To nieskończona pętla, ponieważ wydarzenie {{x0} do elementu <li> i powoduje rekurencyjną rekurencyjną obsługę.

Jednym rozwiązaniem byłoby tylko przekaźnik zdarzenia {x0}}, jeśli nie pochodzi z samego przycisku radiowego:

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

    // [...]

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

Jeśli jednak chcesz tylko sprawdzić przycisk radiowy, przekaźnik zdarzenia nie jest konieczne. Możesz użyć prop ():

radio.prop("checked", true);
8
Frédéric Hamidi 16 październik 2011, 12:21

Aby zapobiec bulgoczeniu zdarzeń, możesz użyć stoppropagacji ():

$(".Method li").click(function(evt) {
    evt.stopPropagation();
    ...
});
0
Samuli Hakoniemi 16 październik 2011, 12:26

Twój kod potrzebuje poprawek, spróbuj tego:

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

Możesz umieścić radio.attr () tylko raz poza warunkami, jeśli wszystkie znaczniki Li zawierają przyciski radiowe.

0
Coder 16 październik 2011, 14:06