动态插入DOM元素后如何触发Bootstrap-Toggle渲染复选框样式？

Bootstrap Toggle在页面加载时会自动初始化所有带有data-toggle="toggle"的复选框，但动态插入的元素不会被自动识别，因此需要手动调用初始化方法来让新复选框应用组件样式。

修改后的代码示例 #

<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<div class="row"><label for="button_1">Button 1 </label><input type="checkbox" id="button_1" name="button_1" checked="checked" data-toggle="toggle"></div>
<div id="add">ADD button</div>

<script type="text/javascript">
$(document).on("click", "#add", function() {
    var number = $("div.row").length + 1;
    // 用模板字符串创建DOM元素，避免引号拼接错误
    var $newRow = $(`
        <div class="row">
            <label for="button_${number}">Button ${number}</label>
            <input type="checkbox" id="button_${number}" name="button_${number}" checked data-toggle="toggle">
        </div>
    `);
    // 手动初始化新添加的复选框
    $newRow.find('input[type="checkbox"]').bootstrapToggle();
    // 插入到页面中
    $("div.row").last().after($newRow);
});
</script>

核心原理 #

动态插入的DOM元素不会触发Bootstrap Toggle的自动初始化逻辑，必须通过调用.bootstrapToggle()方法，手动触发组件的样式渲染和交互绑定，这样新复选框才能显示Bootstrap Toggle的美观样式。

内容的提问来源于stack exchange，提问作者Zoltan