Using bootstrap-toogle for a stylish checkbox is causing an issue. It seems to work fine on page load, but when I add an input element dynamically through JavaScript, it reverts back to showing the default checkbox.
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div class="row"><label for="button_1">Button 1 </label><input type="checkbox" id="button_1" name="button_1" checked="checked" data-toggle="toggle"></div>
<div id="add">ADD button</div>
<script type="text/javascript">
$(document).on("click", "#add", function() {
var number = $("div.row").length + 1;
var content = "<div class=\"row\"><label for=\"button_"+number+"\">Button "+number+" </label><input type=\"checkbox\" id=\"button_"+number+"\" name=\"button_"+number+"\" checked=\"checked\" data-toggle=\"toggle\"></div>";
$("div.row").last().after(content);
});
</script>
View the working example on this fiddle: https://jsfiddle.net/8w3dk264/
If you know how to ensure that the bootstrap-toogle code runs properly even after adding elements dynamically, please let me know!
Appreciate your help,