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.

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.

• javascript
• jquery
• html
• checkbox

3 Answers 3

You can bind checkbox change like this:

$(document).ready(function() {
    $(".extraItemList").on("change", 'input[type="checkbox"]',  function() {
        console.log("check");
    });    
});

By doing so it will bind to all inputs of checkbox type which are inside the extraItemList class.

I hope this helps.

You should use event delegation for dynamic element like following.

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

Change

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

To

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

If you go with you solution jQuery wil bind the event to the checkboxes currently available, if you go with mine jQuery will bind the event to the document and will check if the element is the checkbox and it will trigger the event. So it'll work for dynamic content