javascript - Bootstrap 4 开关更改事件将不起作用

Question

我正在使用多个 Bootstrap 4 开关 通过 JS 附加加载到页面上，并且需要在开关更改时调用函数。以下示例在我在 HTML 中添加开关时有效，但是当我在页面加载后通过 JS 动态加载它们时，它将不起作用。我不想为此使用任何其他外部库!

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

我尝试了多个 JS 代码，但似乎都没有工作。示例

$('.custom-control').on('change', function (e) {
  let value = this.value;
  let test = $(e).target.checked;
});

还尝试使用 input 标签的 class。

Answer 1

A checkbox具有检查属性。

因此使用:

let test = e.target.checked;

因为您动态添加了您需要委托(delegate)更改事件的开关:

$(document).on('change', '.custom-control', function (e) {

片段:

$(document).on('change', '.custom-control', function (e) {
    let test = e.target.checked;
    console.log(test);
});

$('body').append('<div class="custom-control custom-switch">\
        <input type="checkbox" class="custom-control-input" id="customSwitch1">\
        <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>\
</div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">