triggerHandler предотвращает выполнение события change

Question

У меня есть радиовход в div. Нажатие на div должно вызвать щелчок на радиовходе. Я использую триггер для предотвращения ошибки: превышен максимальный размер стека вызовов.

На радио имеется прослушиватель изменений (если изменения радио вызывают какое-то действие). Однако это срабатывает, только если я нажимаю прямо на радио, оно не срабатывает, если я нажимаю на обертку. Как мне решить это? Спасибо. https://jsfiddle.net/cewb2kpu/2/

HTML

    <div class="inputwrapper">
      <input type="radio" name="age1" value="30"> 0 - 30
    </div>
    <div class="inputwrapper">
      <input type="radio" name="age2" value="60"> 31 - 60
    </div>
    <div class="inputwrapper">
      <input type="radio" name="age3" value="100"> 61 - 100
    </div>

Jquery

    $('.inputwrapper').click(function () {
          $(this).children('input').attr('checked', 'checked').triggerHandler('click');

         $(this).siblings('.inputwrapper').removeClass('selected');
        $(this).addClass('selected');
    });

     $('input[type=radio][name="age2"]').change(function(){
     alert('changed');
     });

Answer 1

Я разместил решение здесь - надеюсь, я правильно понял вашу проблему https://jsfiddle.net/4kc571ge/2/

Попробуйте следующее:

HTML

<div class="inputwrapper">
  <input type="radio" name="age1" class="aradio"  value="30"> 0 - 30
</div>
<div class="inputwrapper">
  <input type="radio" name="age2"  class="aradio" value="60"> 31 - 60
</div>
<div class="inputwrapper">
  <input type="radio" name="age3" class="aradio" value="100"> 61 - 100
</div>

jQuery

$('.inputwrapper').click(function (e) {
   $('.aradio').prop('checked', false);
     $(this).children('input').prop('checked', true).triggerHandler('click');
     $(this).addClass('selected');
});

 $('.aradio').change(function(){
     alert('changed');
 });

  $('.inputwrapper').click(function(){
     alert('changed');
 });

Answer 2

Хорошо, я думаю, что эта версия не вызывает оповещение о клике div: https://jsfiddle.net/yk1mdzwL/1/

HTML

<div class="inputwrapper">
  <input type="radio" name="age1" class="aradio"  value="30"> 0 - 30
</div>
<div class="inputwrapper">
  <input type="radio" name="age2"  class="aradio" value="60"> 31 - 60
</div>
<div class="inputwrapper">
  <input type="radio" name="age3" class="aradio" value="100"> 61 - 100
</div>

jQuery

$('.inputwrapper').click(function (e) {
     $('.aradio').prop('checked', false);
     $(this).children('input').prop('checked', true).triggerHandler('click');
     $(this).addClass('selected');
});

 $('.aradio').change(function(){
     alert('changed');
 });

Answer 3

Попробуйте изменить

$(this).children('input').attr('checked', 'checked').triggerHandler('click');

На это:

$(this).children('input').attr('checked', 'checked').change();

При этом будет выполнено событие изменения вместо нажатия .

$('.inputwrapper').click(function () {
	  $(this).children('input').attr('checked', 'checked').change();

	 $(this).siblings('.inputwrapper').removeClass('selected');
	$(this).addClass('selected');
});

 $('input[type=radio][name="age2"]').change(function(){
 alert('changed');
 });

.inputwrapper {height:20px; width:200px; background:green;margin-bottom:5px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="inputwrapper">
  <input type="radio" name="age1" value="30"> 0 - 30
</div>
<div class="inputwrapper">
  <input type="radio" name="age2" value="60"> 31 - 60
</div>
<div class="inputwrapper">
  <input type="radio" name="age3" value="100"> 61 - 100
</div>