为何在$(document).ready中动态生成bootstrap-switch复选框无效？

嘿，这个问题核心在于开关组件的初始化时机，咱们来捋清楚两种写法的区别：

为什么第一种写法（代码在$(document).ready内）不生效？ #

你用的带data-toggle="switch"的复选框，应该是依赖某个UI插件（比如Bootstrap Switch这类）来渲染成美观的开关样式。这类插件的常规逻辑是：在document ready事件触发时，自动扫描整个DOM中带有指定属性（比如data-toggle="switch"）的元素，然后初始化它们为开关组件。

当你把动态插入DOM的代码放在$(document).ready回调里时，顺序是这样的：

1. 页面DOM加载完成，插件先执行了初始化扫描，这时候#cbtestb里还没有那个复选框
2. 你的代码才把复选框插入到#cbtestb中
3. 插件已经完成了扫描，不会再自动识别这个新插入的元素，所以它只是个普通复选框，看起来“没生效”

为什么第二种写法（代码在$(document).ready外）能正常运行？ #

浏览器是按代码的书写顺序逐行解析执行的：

1. 你的代码先执行$('#cbtestb').html(...)，把复选框插入到DOM中（这时候DOM还在构建过程中，还没触发ready事件）
2. 等整个DOM加载完成，$(document).ready触发，插件的初始化逻辑开始扫描DOM
3. 这时候复选框已经存在，插件能识别到它的data-toggle="switch"属性，正常初始化开关样式

正确的解决方案（推荐） #

不管代码放在哪里，动态插入元素后手动调用插件的初始化方法，这样就能确保新元素被正确渲染。以Bootstrap Switch为例，代码应该写成：

$(document).ready(function () { 
  $('#cbtestb').html('<input type="checkbox" checked="checked" id="cbtest" data-toggle="switch" />');
  // 手动触发组件初始化
  $('#cbtest').bootstrapSwitch();
});

这样不管是在ready内还是其他时机动态插入元素，都能强制插件初始化这个新的复选框，保证样式生效。

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