jQuery append lose style

Question

I have a problem when I try to use append function of jQuery, it add element to a div but it lose style. This is an example here

This is my 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>

and this is the js:

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

The style of my input is bootstrap-toggle.

Can you help me? Thanks

Answer 1

You must reinitialize the toggle, as the initialization happens on document load. Not on the fly.

JsFiddle

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

})

description:

1. create the checkbox in el
2. append the el to the #mainDiv
3. reinitialize all js/css that makes it pretty with el.bootstrapToggle()