problem in Get the value of radio buttons

I send information to the page via livewire and display it via jQuery in loop.

<ul class="custom-control-group" id="networlist">

</ul>

    <script>
            let networks
            window.addEventListener('networksEvent' , event => {
                networks = event.detail.networks;
            });
            $(window).on('load', function() {
                $.each(networks, function( index, network ) {
                    var checked = index == 0 ? "checked" : ''
                    $('#networlist').append('<li>' +
                        '<div class="custom-control custom-checkbox custom-control-pro no-control">'+
                        '<input type="radio" '+checked+'  class="custom-control-input" name="coinNetwork" value="'+network.id+'" id="'+network.id+'">'+
                        '<label class="custom-control-label english" for="'+network.id+'">'+network.name+'</label>'+
                        '</div>'+
                        '</li>');
                });
            });

            $('.coinNetwork').on('change', function(event) {
                console.log($('input[name=coinNetwork]:checked', '#networlist').val())
            });
    </script>

But when I click on the radio button, nothing happens and it does not show me the value in the console.. what is problem?

Answer

You already had the correct selector inside your final console.log but you bind the event a little too late, because the list does not exist when you try to bind it. Either move the event handler inside your load handler, or handle it dynamically:

let networks = [{id: 1, name: 'network1'}, {id: 2, name: 'network2'}];
   
  $(window).on('load', function() {
      $.each(networks, function( index, network ) {
          var checked = index == 0 ? "checked" : ''
          $('#networlist').append('<li>' +
              '<div class="custom-control custom-checkbox custom-control-pro no-control">'+
              '<input type="radio" '+checked+'  class="custom-control-input" name="coinNetwork" value="'+network.id+'" id="'+network.id+'">'+
              '<label class="custom-control-label english" for="'+network.id+'">'+network.name+'</label>'+
              '</div>'+
              '</li>');
      });
    $('input[name=coinNetwork]').on('click', function(event) {
      console.log($('input[name=coinNetwork]:checked', '#networlist').val())
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="custom-control-group" id="networlist">

For binding to a dynamically added element:

let networks = [{id: 1, name: 'network1'}, {id: 2, name: 'network2'}]
$(window).on('load', function() {
  $.each(networks, function( index, network ) {
    var checked = index == 0 ? "checked" : ''
    $('#networlist').append('<li>' +
                            '<div class="custom-control custom-checkbox custom-control-pro no-control">'+
                            '<input type="radio" '+checked+'  class="custom-control-input" name="coinNetwork" value="'+network.id+'" id="'+network.id+'">'+
                            '<label class="custom-control-label english" for="'+network.id+'">'+network.name+'</label>'+
                            '</div>'+
                            '</li>');
  });
});

//bind it to networlist
$('#networlist').on('click', 'input[name=coinNetwork]', function(event) {
  console.log($('input[name=coinNetwork]:checked', '#networlist').val())
});

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="custom-control-group" id="networlist">

Also notice I changed the event from change to click so you get the correct selected value (instead of the last one).