Lorsque vous cliquez sur le LI puis cliquez automatiquement sur la radio d'entrée

Question

Lorsque vous cliquez sur li, je veux que la radio d'entrée soit cliquée.

Cependant, je reçois une erreur de journal Conole disant:

Uncaught RangeError: Maximum call stack size exceeded 

Comment résoudre ce problème?

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

est mon code jQuery bonne? qu'est-ce qui peut être amélioré?

merci.

Answer 1

C'est une boucle infinie, parce que l'événement click vous déclenchez sur le bouton radio bubbles up à l'élément <li> et provoque votre gestionnaire d'exécuter de manière récursive.

Une solution serait de relais que l'événement click si elle ne vient pas du bouton radio lui-même:

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

    // [...] 

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

Si vous voulez seulement vérifier le bouton radio, cependant, relayer l'événement n'est pas nécessaire. Vous pouvez utiliser prop() à la place:

radio.prop("checked", true); 

Answer 2

Pour éviter bouillonnement d'événement, vous pouvez utiliser stopPropagation():

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

Answer 3

a besoin Votre code tweaks, essayez ceci:

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

Vous pouvez placer radio.attr() une seule fois en dehors de la condition si tous les tags LI contiennent des boutons radio.