如何渲染引导程序切换

Question

我在车把模板中有一个bootstrap切换，而页面加载时间完全可见，但在重新设置车把模板（模板已切换）之后，它是不可见的。

重新模板之前：

代码：

 <div class="switch switch-square has-switch" data-on-label="&lt;i class='fui-check'&gt;&lt;/i&gt;" data-off-label="&lt;i class='fui-cross'&gt;&lt;/i&gt;"><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">&nbsp;</label><span class="switch-right"><i class="fui-cross"></i></span></div></div>

重新模板后：

重新模板代码后：

 <div class="switch switch-square" data-on-label="&lt;i class='fui-check'&gt;&lt;/i&gt;" data-off-label="&lt;i class='fui-cross'&gt;&lt;/i&gt;"><input type="checkbox" id="colorBar-Toggle"></div>

handleBars代码：

      <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>

请有人帮助我，这对我来说非常重要。

Answer 1

大家好我在重新模板后创建了如果我调用以下函数它工作正常。但是在调用函数后其他切换也有效。我在bootstrap-switch.js文件中找到了以下函数。

我不知道为什么其他切换正在起作用。另外一个切换还有一个新的div正在添加。因为我在主切换周围得到额外的填充物。

其他切换代码：

<div class="switch switch-square has-switch" data-on-label="2" data-off-label="1"><div class="switch-animate switch-off switch-on"><div class="switch-animate"><div class="switch-on switch-animate"><div class="switch-animate"><div class="switch-animate"><div class="switch-animate"><div class="switch-animate"><input type="checkbox" id="qtenToggle"><span class="switch-left">2</span><label for="qtenToggle">&nbsp;</label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle">&nbsp;</label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle">&nbsp;</label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle">&nbsp;</label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle">&nbsp;</label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle">&nbsp;</label><span class="switch-right">1</span></div><span class="switch-left">2</span><label for="qtenToggle">&nbsp;</label><span class="switch-right">1</span></div></div>

bootstrap功能：

 $('.switch')['bootstrapSwitch']();