최대 호출 스택이 입력 클릭 변경을 초과했습니다.

Question

부모를 클릭 할 때 입력이 선택되도록 트리거하려고합니다. 실제로 "클릭 한"입력에 문제가있어 변경 기능에서 클릭하도록 호출했습니다. 그러나 변경 기능에서 "클릭 된"경우 최대 호출 스택을 초과했습니다. 실제로 그것을 클릭하지 않고 소품을 변경()하려고하면 클릭하지 않거나 내 활성 클래스 기능을 사용할 수 없습니다.

init: function() { 

      $('input:radio').on("change", function() { 
       console.log($(this), 'clickeddd input') 
       $(this).click(); 
      }); 

      $('[data-membership-check]').on('click', function() { 

      var btnBox = $('[data-membership-type]'); 

      // if already active, remove on second click 
       if ($(this).hasClass('active')) { 
       $(this).removeClass('active'); 

       // uncheck hidden radio on deselect 
       $(this).children('input:radio').prop('checked', false).change(); 

      // remove active class(es) and toggle active on 
       } else { 
       $('[data-membership-check]').removeClass('active'); 
       btnBox.removeClass('active'); 
       $(this).toggleClass('active'); 

       //check hidden radio button 
       $(this).children('input:radio').prop('checked', true).change(); 
       } 

      // toggle nearest container active class 
      $(this).closest(btnBox).toggleClass('active'); 

     }); 
    } 




      <div class="member-signup-choices"> 
      <div class="input-membership-type" data-membership-type> 
       <label class="membership-type-title"> 
       Professional 
       </label> 
       <div class="membership-type-select"> 
       <span class="membership-input-icon membership-input-check" data-membership-check> 
        <input required="required" type="radio" id="edit-submitted-membership-type-1" name="submitted[membership_type]" value="4" class="form-radio"> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-check"> 
        </use> 
        </svg> 
       </span> 
       <!-- modal btn --> 
       <a href="#international-modal" class="membership-input-icon membership-input-help" data-magnific-modal> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-help"> 
        </use> 
        </svg> 
       </a> 
       <!-- /modal btn --> 
       </div> 
      </div> 
      <div class="input-membership-type" data-membership-type> 
       <label class="membership-type-title"> 
       Associate 
       </label> 
       <div class="membership-type-select"> 
       <span class="membership-input-icon membership-input-check" data-membership-check> 
        <input required="required" type="radio" id="edit-submitted-membership-type-2" name="submitted[membership_type]" value="4" class="form-radio"> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-check"> 
        </use> 
        </svg> 
       </span> 
       <!-- modal btn --> 
       <a href="#international-modal" class="membership-input-icon membership-input-help" data-magnific-modal> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-help"> 
        </use> 
        </svg> 
       </a> 
       <!-- /modal btn --> 
       </div> 
      </div> 
      <div class="input-membership-type form-item-submitted-membership-type" data-membership-type> 
       <!-- <input required="required" type="radio" id="edit-submitted-membership-type-3" name="submitted[membership_type]" value="3" class="form-radio"> --> 
       <label class="membership-type-title"> 
       Student 
       </label> 
       <div class="membership-type-select"> 
       <span class="membership-input-icon membership-input-check" data-membership-check> 
        <input required="required" type="radio" id="edit-submitted-membership-type-3" name="submitted[membership_type]" value="4" class="form-radio"> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-check"> 
        </use> 
        </svg> 
       </span> 
       <!-- modal btn --> 
       <a href="#international-modal" class="membership-input-icon membership-input-help" data-magnific-modal> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-help"> 
        </use> 
        </svg> 
       </a> 
       <!-- /modal btn --> 
       </div> 
      </div> 
      <div class="input-membership-type form-item-submitted-membership-type" data-membership-type> 
       <label class="membership-type-title"> 
       Affiliate 
       </label> 
       <div class="membership-type-select"> 
       <span class="membership-input-icon membership-input-check" data-membership-check> 
        <input required="required" type="radio" id="edit-submitted-membership-type-4" name="submitted[membership_type]" value="4" class="form-radio"> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-check"> 
        </use> 
        </svg> 
       </span> 
       <!-- modal btn --> 
       <a href="#international-modal" class="membership-input-icon membership-input-help" data-magnific-modal> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-help"> 
        </use> 
        </svg> 
       </a> 
       <!-- /modal btn --> 
       </div> 
      </div> 
      <div class="input-membership-type form-item-submitted-membership-type" data-membership-type> 
       <label class="membership-type-title"> 
       International 
       </label> 
       <div class="membership-type-select"> 
       <span class="membership-input-icon membership-input-check" data-membership-check> 
        <input required="required" type="radio" id="edit-submitted-membership-type-5" name="submitted[membership_type]" value="4" class="form-radio"> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-check"> 
        </use> 
        </svg> 
       </span> 
       <!-- modal btn --> 
       <a href="#international-modal" class="membership-input-icon membership-input-help" data-magnific-modal> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-help"> 
        </use> 
        </svg> 
       </a> 
       <!-- /modal btn --> 
       </div> 
      </div> 
      <div class="input-membership-type form-item-submitted-membership-type" data-membership-type> 
       <label class="membership-type-title"> 
       Industry 
       </label> 
       <div class="membership-type-select"> 
       <span class="membership-input-icon membership-input-check" data-membership-check> 
        <input required="required" type="radio" id="edit-submitted-membership-type-4" name="submitted[membership_type]" value="4" class="form-radio"> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-check"> 
        </use> 
        </svg> 
       </span> 
       <!-- modal btn --> 
       <a href="#international-modal" class="membership-input-icon membership-input-help" data-magnific-modal> 
        <svg role="img"> 
        <use xlink:href="../../assets/images/icons/icon-map.svg#icon-help"> 
        </use> 
        </svg> 
       </a> 
       <!-- /modal btn --> 
       </div> 
      </div> 
      </div> 

Answer 1

문제는이 2 줄에 있습니다

$(this).children('input:radio').prop('checked', false).change(); 
$(this).children('input:radio').prop('checked', true).change(); 

.change()는 라디오 버튼에 change 이벤트를 트리거합니다. prop() 메서드는 checked 속성을 처리하므로이 메서드를 호출 할 필요가 없습니다. .change()이 상단에 선언 된 change 이벤트 처리기를 트리거 한 다음 입력에서 다른 click 이벤트를 트리거하고이 프로세스가 무한 루프에서 계속되기 때문에 문제가됩니다. checked 속성을 변경 한 후 라디오 입력에 .change()으로 전화 할 필요가 없습니다.

$(this).children('input:radio').prop('checked', false); 
$(this).children('input:radio').prop('checked', true); 

Answer 2

제거 '입력 : 라디오'그 두 라인에서 해당 단계를 제거하십시오 변경 이벤트 및 이벤트를 클릭하여 '데이터 회원은 체크인'내부 필요한 jQuery 코드를 작성 않습니다.