Js отследить изменение radio

Через JS меняю выбранный по умолчанию radio со значения 3 на 1, расположенный ниже container on change не видит этого изменения, вопрос как сделать чтобы увидел.

const container = $('#container')

//меняем radio
//$('input[name="r_id"][value="1"]').prop('checked', true)
$('input[name="r_id"][value="1"]').trigger('click')

container.on('change', 'input[name="r_id"]', function() {
  console.log('радио изменен')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div><input type="radio" name="r_id" value="1"></div>
  <div><input type="radio" name="r_id" value="2"></div>
  <div><input type="radio" name="r_id" value="3" checked></div>
  <div><input type="radio" name="r_id" value="4"></div>
</div>


Ответы (1 шт):

Автор решения: Igor

$('#container').on('change', 'input[name="r_id"]', function() {
  console.log('радио изменен');
});

//меняем radio
$('input[name="r_id"][value="1"]').prop('checked', true).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div><input type="radio" name="r_id" value="1"></div>
  <div><input type="radio" name="r_id" value="2"></div>
  <div><input type="radio" name="r_id" value="3" checked></div>
  <div><input type="radio" name="r_id" value="4"></div>
</div>

→ Ссылка