javascript - 动态复选框 onchange 无法使用 jquery 工作？

Question

我使用 jQuery 创建了动态复选框并在 div 中显示，我还创建了复选框 onchange 函数。

静态复选框 onchange 函数工作，但当我生成动态复选框和相同的函数调用时，它不起作用。

动态复选框代码:

$(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"
            });
        });
    });

复选框更改功能:

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

Html 静态复选框:有效

<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 动态:

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

</div>

我在 .extraItemList 类上添加动态复选框

我花了很多时间来解决它，但找不到任何东西。

有解决办法吗？因为它很奇怪。

Answer 1

您可以像这样绑定(bind)复选框更改:

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

通过这样做，它将绑定(bind)到 extraItemList 类中的所有复选框类型的输入。

希望对您有所帮助。