javascript - jQuery 追加丢失样式

Question

当我尝试使用 jQuery 的 append 函数时遇到问题，它将元素添加到 div 但它失去了样式。这是一个例子 here

这是我的 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. 使用 el.bootstrapToggle() 重新初始化所有使其美观的 js/css