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

Checkbox Onchange功能：

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

Html Static Checkbox：它正在运行

<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>

我在.extraItemList类

上添加了动态复选框

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

有什么解决方案吗？因为这很奇怪。

Answer 1

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

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

Answer 2

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

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

通过这样做，它将绑定到checkboxItemList类中的checkbox类型的所有输入。

我希望这会有所帮助。

Answer 3

更改

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

要

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

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

动态复选框onchange无法使用jquery？

3 个答案: