动态复选框 onchange 不能使用 jquery 工作？答案

【问题标题】：Dynamic checkbox onchange not working using jquery?动态复选框 onchange 不能使用 jquery 工作？
【发布时间】：2016-10-08 08:01:15
【问题描述】：

我使用 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"
            });
        });
    });

Checkbox Onchange 函数：

$(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 类上添加动态复选框

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

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

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

您可以像这样绑定复选框更改：

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

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

我希望这会有所帮助。

【讨论】：

【解决方案2】：

您应该将event delegation 用于动态元素，如下所示。

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

【讨论】：

【解决方案3】：

改变

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

到

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

如果您使用解决方案，jQuery 会将事件绑定到当前可用的复选框，如果您使用我的解决方案，jQuery 会将事件绑定到文档，并检查元素是否为复选框并触发事件。所以它适用于动态内容

【讨论】：