jquery - jquery Bootstrap 切换 inside Bootstrap table

  显示原文与译文双语对照的内容

我正在使用 Bootstrap 切换样式复选框( data-toggle="切换") 。 这已经完美地工作了,没有问题。 但是,如果我将这里复选框 inside 放在 Bootstrap table ( data-toggle="table") 中,那么 Bootstrap 切换复选框不再正常工作。
具体来说,更改事件触发,但复选框/按钮不再显示滑动/关闭行为。 只有当包含 table的data-toggle="table"元素有元素时,才会缩小这一。
有谁遇到过这个问题并提出了解决方案?
以下是演示这里问题的jsFiddle: JSFiddle

html :


<div class="cDemo">


<div id="toolbar">


<span>This first table demonstrates the problem</span>


</div>


<table class="table config-table"


 data-toggle="table"


 data-sort-name="Name"


 data-sort-order="asc"


 data-toolbar="#toolbar"


 data-search="true"


 data-search-text=""


 data-pagination="true"


 data-page-size="5"


 data-page-list="[5,10,15]"


 id="configTable">


<thead>


 <tr>


<th data-field="Enable">Enable</th>


<th data-field="Name">Name</th>


 </tr>


</thead> 


 <tr>


 <td>


 <span class="label label-pill pull-left">


 <input id="toggle-trigger" 


 checked="checked"


 data-toggle="toggle"


 class="on-off-btn"


 data-size="mini"


 data-onstyle="danger"


 data-offstyle="default"


 type="checkbox"/>


 </span>


</td>


<td>File Name</td>


</table>


</div>


<div id="showResponse1"></div>



jQuery:


$('.on-off-btn').bootstrapToggle({


 on: 'On',


 off: 'Off'


});



$('.cDemo').on("change","#toggle-trigger",function(e){


 var link = $(e.target);


 $('#showResponse1').html('Toggle: ' + link.prop('checked'));


});



时间: 原作者:

看起来你使用的插件不是用来处理嵌套插件元素的呈现的。 除非你想更改源代码,否则在启动引导表插件之后,你可以动态添加和初始化切换开关。

添加 <span class="toggle-placeholder"/> 需要切换 switch的占位符。 然后初始化它们:


$(function() {


 var $checkbox = '<input type="checkbox" checked="checked"data-toggle="toggle" data-onstyle="danger" class="on-off-btn" data-size="mini"/>'


 $('.toggle-placeholder').html($checkbox);


 $('.toggle-placeholder').find('input[type=checkbox][data-toggle=toggle]')


. each(function(){


 $(this).bootstrapToggle();


 });


});



就像你所见,$checkbox 是你在标记中之前所做的切换的html 。 然后我们将占位符内容设置为 $checkbox html,然后对于页面上的每个 .toggle-placeholder,我们初始化引导切换插件。

现在这是一个粗略的例子,每个 switch 都是相同的,但你可以通过在占位符中包含。 然后,新的初始化函数可以通过读取占位符属性将这些函数分配给复选框。

...