jquery - 使用 jQuery 在通过 javascript 创建的复选框上检测复选框状态更改

Question

我通过 Ajax 在变量中接收到这个 html 代码data。它包含Bootstrap 4 个开关，它们基本上是复选框：

<div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="3" name="details[]" id="control_id_detail_3"><label class="custom-control-label" for="control_id_detail_3">S</label></div>
<div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="4" name="details[]" id="control_id_detail_4"><label class="custom-control-label" for="control_id_detail_4">M</label></div>
<div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="5" name="details[]" id="control_id_detail_5"><label class="custom-control-label" for="control_id_detail_5">L</label></div>
<div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="6" name="details[]" id="control_id_detail_6"><label class="custom-control-label" for="control_id_detail_6">XL</label></div>

然后，我将该 html 内容添加到名为#attribute_holder的 div中：

$('#attribute_holder').html(data);

所以最后，我有这个代码：

<div id="attribute_holder">
   <div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="3" name="details[]" id="control_id_detail_3"><label class="custom-control-label" for="control_id_detail_3">S</label></div>
   <div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="4" name="details[]" id="control_id_detail_4"><label class="custom-control-label" for="control_id_detail_4">M</label></div>
   <div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="5" name="details[]" id="control_id_detail_5"><label class="custom-control-label" for="control_id_detail_5">L</label></div>
   <div class="custom-control custom-switch"><input class="custom-control-input" type="checkbox" value="6" name="details[]" id="control_id_detail_6"><label class="custom-control-label" for="control_id_detail_6">XL</label></div>
</div>

现在，我需要通过 jQuery 检测复选框何时更改其状态。我正在使用这段代码：

$(function(){
$('#attribute_holder input[type="checkbox"]').on('change', function(){
    console.log($(this).val() + ' changed state to: ' + $(this).is(':checked'));
});
});

如果在加载页面时 html 已经在 html 中烧录，这似乎有效。但是，如果我通过 ajax 加载相同的 html，jQuery 不会检测到复选框上的更改事件。我错过了什么？谢谢！

标签： jquerycheckboxbootstrap-4