I am facing an issue with a Bootstrap toggle in a Handlebars template. When the page initially loads, the toggle is visible, however, after re-templating the Handlebars template that contains the toggle, it disappears.
Before Re-Template:
Initial code :
<div class="switch switch-square has-switch" data-on-label="<i class='fui-check'&></i&>" data-off-label="<i class='fui-cross'&></i&>"><div class="switch-animate switch-off"><input type="checkbox" id="colorBar-Toggle"><span class="switch-left"><i class="fui-check"></i></span><label for="colorBar-Toggle"> </label><span class="switch-right"><i class="fui-cross"></i></span></div></div>
After Re-Template:
Updated code after re-templating:
<div class="switch switch-square" data-on-label="<i class='fui-check'&></i&>" data-off-label="<i class='fui-cross'&></i&>"><input type="checkbox" id="colorBar-Toggle"></div>
Handlebars template code:
<script id="planner-template" type="text/x-handlebars-template">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered table-responsive" id="joy_fifth" data-intro="5. You are now ready to play with the planner!" data-position="top">
<thead>
<tr>
<th width="20%">Bizstep</td>
<th width="20%">Location</td>
<th width="15%">Time Duration</td>
<th width="15%">Temperature</td>
<th width="15%">Freshtime Points</td>
<th width="15%"><div class="switch switch-square" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fui-cross'></i>"><input type="checkbox" id="colorBar-Toggle"/></div></td>
</tr>
</thead>
<tbody>...</tbody>
</script>
Any help on this issue would be greatly appreciated.