on selet radio button send ajax call and radio button append using javascript

I'm having trouble after looking at the jQuery docs. I'm just trying to on selet radio button send ajax call and radio button append using javascript. I've tried several things but have not been able to get this right:

         for (var i = 0; i < response.split(',').length; i++) {
            $('#radio_append').append('<input name="suggested_dates" id="suggested_dates'+count+'" value="' + response.split(',')[i] + '" class="styled chal_bhi_radio" type="radio" /><label for="suggested_dates'+count+'">' + response.split(',')[i] + '</label> <br> ')
            count++;
          }

after append this radio button, there are four radio button on click on any one radio button send this ajax call i'm trying several things but did' work...

$(".chal_bhi_radio").on('change',function(){
alert("HI");
  var date_al=$(".chal_bhi_radio:checked").val();
  $.post( "<?php echo $site_root;?>common/service.php?j=4", {date_select: date_al},  
      function( response ) {
        if(response != ''){
             per_data = $.parseJSON(response);
             if(per_data!=0){
                $("#price_special_append").html("");
                add_basic=per_data;
                $("#price_special_append").append(" € "+add_basic+" ")
             }
        }
   });

but on select anyone checkbox it did't show alert box. need help asap thanks community