Dynamic checkbox onchange not working using jquery?

Question

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.

Yogesh Yadav · Accepted Answer · 2016-10-08 08:49:07Z

4

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.

answered Oct 8, 2016 at 8:49

Yogesh Yadav

653 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ibrahim Khan · Accepted Answer · 2016-10-08 08:04:55Z

3

You should use event delegation for dynamic element like following.

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

answered Oct 8, 2016 at 8:04

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Comments

Robin Knaapen · Accepted Answer · 2016-10-08 08:13:48Z

0

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

edited Oct 8, 2016 at 8:13

answered Oct 8, 2016 at 8:08

Robin Knaapen

6064 silver badges12 bronze badges

Collectives™ on Stack Overflow

Dynamic checkbox onchange not working using jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related