максимальный стек вызовов превышен входное изменение клика

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 на входе, и этот процесс продолжается в бесконечном цикле. Не нужно будет звонить .change() на радиовходы после изменения их checked. Попробуйте удалить этот шаг из этих 2-х линий:

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

Answer 2

удалить «вход: радио» изменение событий и не написать необходимый код JQuery внутри «данных членства проверки» нажмите событие.