jQuery追加失败的风格

Question

当我尝试使用jQuery的append函数时,我有一个问题,它将元素添加到div但它失去了风格.这是一个例子在这里

这是我的HTML:

<form>
<div class="checkbox">
    <label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
        Toggle One
    </label>
</div>
<div id="mainDiv">
</div>
<div>
    <button type="button" class="btn btn-default" id="btnAdd">
      Add
    </button> 
</div>

这是js:

$('#btnAdd').click(function(){
  $('#mainDiv').append(' <input type="checkbox" data-toggle="toggle"/>');
})

我输入的样式是bootstrap-toggle.

你能帮助我吗？谢谢

Answer 1

您必须重新初始化切换,因为初始化发生在文档加载上.不是在飞行中.

的jsfiddle

$('#btnAdd').click(function(){
  var el = $(' <input type="checkbox" data-toggle="toggle"/>');
  $('#mainDiv').append(el);
  el.bootstrapToggle();

})

描述:

1. 在中创建复选框 el
2. 追加el到#mainDiv
3. 重新初始化所有使用它的js/css el.bootstrapToggle()