动态添加引导开关

Bootstrap Switch Dynamically Added

本文关键字：开关 添加 动态      更新时间：2023-09-26

我正在尽我所能让一个动态生成的复选框变成引导开关。

输入由如下函数生成：

function createButton(id) {
  return $('<input data-id="'+id'+" type="checkbox"/>').bootstrapSwitch();
}
$('#myTableRow').append(createButton(id))

这是一个不断.empty()和重建的表，所以没有时间我可以只调用通用$('input').bootstrapSwitch()。根本没有合乎逻辑的地方来放置这个。有什么想法吗？

在这里摆弄

function createButton() {
  var btn = $('<input type="checkbox"/>')
  var div = $('<div></div>').append(btn);
  div.css({
    top: -99999,
    left: -99999,
    position: 'fixed'
  });
  $('body').append(div);
  btn.bootstrapSwitch();
  div.css({
    top: 0,
    left: 0,
    position: 'relative'
  });
  return div;
}
$('body').append(createButton())

这是我自己的答案

  1. 创建输入
  2. 创建一个div 并将输入附加到div
  3. 将div 附加到远离可见屏幕的正文中
  4. 在输入上调用 .bootstrapSwitch((
  5. 重置div 定位
  6. 返回div 并将其附加到

瞧

更新小提琴

给你所有的复选框一般类，并使用它来将它们变成自举开关，检查下面的示例。

function createButton() {
    return $('<input type="checkbox" class="checkbox"/>');
}
$('body').append(createButton());
$('body .checkbox').bootstrapSwitch();

希望这有帮助。

相关文章：