动态添加自举开关

Question

我尽我所能得到一个动态生成的复选框，变成一个Bootstrap Switch。

输入由以下函数生成：

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

$('#myTableRow').append(createButton(id))

这是一张经常.empty()和重建的表格，因此我没有时间调用通用$('input').bootstrapSwitch()。没有理由把它放在这里。有什么想法吗？

Fiddle HERE

Answer 1

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并将其附加到

Voila

Answer 2

<强> Update fiddle

将所有复选框设置为通用类并使用它将它们转换为自举开关，请检查以下示例。

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

希望这有帮助。