Dynamic checkbox onchange not working using jquery?

I have created dynamic checkboxes using jQuery and showing in div and I have created checkbox onchange function.

static checkbox onchange function working but when I generate dynamic checkbox and same function call it didn't work.

Dynamic checkbox code:

$(document).on("click", "#item_modal", function() {
        $.ajax({
        url: '<?=base_url()?>extraItem',
        type: 'post',
        dataType: 'json',
        data: {itemId: id}
        })
        .done(function(data) {
             console.log(data);
            var extraItems = "";
            $.each(data, function(index, el) {
            extraItems+='<div class="col-md-4 col-lg-4"> <label style="width:100%"> <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"> <div style="font-size:14px;color:#fff;" class="checkbox"> <input name="product" value="'+el.amt+'" type="checkbox" id="p'+el.id+'"> <b>'+el.name+'</b> </div></div><div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"> <p style="color:#fff;padding:10px;font-size:12px"> <span class="fa fa-rupee"></span> <b>'+el.amt+'</b> </p></div></label> </div>';
            });
            $('.extraItemList').append(extraItems);
            jQuery('#myModal .modal-content').html();
            $('#myModal').modal({
                "backdrop": "static"
            });
        });
    });

Checkbox Onchange Function :

$(document).ready(function() {
    $(":checkbox").on("change", function() {
        console.log("check");
    });    
});

Html Static Checkbox : It's working

<div class="col-md-12 col-lg-12" style="padding:0 34px;">
   <div class="col-md-4 col-lg-4">
      <label style="width:100%">
         <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
            <div style="font-size:14px;color:#fff;" class="checkbox"> <input name="product" value="60.00" type="checkbox" id="p4" class="checkboxes"> <b>Extra Veg</b> </div>
         </div>
         <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
            <p style="color:#fff;padding:10px;font-size:12px"> <span class="fa fa-rupee"></span> <b>60.00</b> </p>
         </div>
      </label>
   </div>
</div>

Html Dynamic :

<div class="col-md-12 col-lg-12 extraItemList" style="padding:0 34px;">

</div>

I am adding dynamic checkboxes on .extraItemList class

I have spent lots of time to resolve it but could not find anything.

Is it any solution ? because it's weird.