Jquery 引导表内的引导切换

我正在使用一个引导切换样式的复选框（data toggle=“toggle”）。这一直工作得很好，没有问题。但是，如果我将此复选框放在引导表（data toggle=“table”）中，则引导切换复选框将不再正常工作。
具体地说，更改事件将激发，但复选框/按钮不再显示滑动开/关行为。我已经将这种情况缩小到仅当包含表具有data toggle=“table”元素时发生。
有人遇到过这种情况并提出了解决方案吗？
下面是我的JSFIDLE演示此问题：

html:

---

看起来您正在使用的插件不是为处理嵌套插件元素的呈现而设计的。除非您想更改源代码，否则可以在启动表插件初始化后动态添加和初始化切换开关

在需要切换开关的位置添加一个

占位符。然后初始化它们：

$(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();
    });
});

$（函数（）{
var$checkbox=''
$（'.toggle placeholder'）.html（$checkbox）；
$（'.toggle占位符'）.find（'input[type=checkbox][data toggle=toggle]'））
.each（函数（{
$（this.bootstraptogle（）；
});
});

如您所见，

$checkbox

是用于切换的html，您以前可能在标记中使用过该切换。然后我们将占位符内容设置为

$checkbox

html，然后针对页面上的每个

.toggle placeholder

，我们初始化引导切换插件

---

现在，这是一个粗略的例子，每个开关都是相同的，但是您可以通过在占位符中包含设置来剪切每个开关。从这里，新的初始值设定项函数可以通过读取占位符属性将这些属性分配给复选框。

首先将类添加到输入中

(input class="class-check".....)

然后添加以下行：

$('.class-check').bootstrapToggle();

在此之后：

$('#showResponse2').html('Toggle2: ' + link.prop('checked'));

希望这能帮助您

我的解决方案：

$(document).ready(function(){ 
    //init jQuery DataTable
    $('#mainTabel').DataTable({
        'pageLength': 25,
        'columnDefs': [
            {
                'orderable': false,
                'targets': 7              
            },
            {
                className: '.hide',
                'visible': false
            }
        ],      
        // dom: 'Bfrtip',
        // buttons: [
        //     'copy', 'csv', 'excel', 'pdf', 'print'
        // ],
        'language': {
                    'search': "_INPUT_",
                    'searchPlaceholder': 'Search...'
                    },
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true

    }); 
    $('#mainTabel').DataTable().columns('.hide').visible(false);


    //init botstrapToggle
    initToggle();
    $('#mainTabel_wrapper').click( function(){
        initToggle();
    });        
    $('#mainTabel_filter').keyup( function(){
        initToggle();
    });

    function initToggle(){ 
        $(function() {      
            $('.cb').find('input[type=checkbox][data-toggle=toggle]')
                                    .each(function(){
                $(this).bootstrapToggle();
            });
        });
    };
 });

---

我们把这些东西放在哪里？

$('#showResponse2').html('Toggle2: ' + link.prop('checked'));

$(document).ready(function(){ 
    //init jQuery DataTable
    $('#mainTabel').DataTable({
        'pageLength': 25,
        'columnDefs': [
            {
                'orderable': false,
                'targets': 7              
            },
            {
                className: '.hide',
                'visible': false
            }
        ],      
        // dom: 'Bfrtip',
        // buttons: [
        //     'copy', 'csv', 'excel', 'pdf', 'print'
        // ],
        'language': {
                    'search': "_INPUT_",
                    'searchPlaceholder': 'Search...'
                    },
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true

    }); 
    $('#mainTabel').DataTable().columns('.hide').visible(false);


    //init botstrapToggle
    initToggle();
    $('#mainTabel_wrapper').click( function(){
        initToggle();
    });        
    $('#mainTabel_filter').keyup( function(){
        initToggle();
    });

    function initToggle(){ 
        $(function() {      
            $('.cb').find('input[type=checkbox][data-toggle=toggle]')
                                    .each(function(){
                $(this).bootstrapToggle();
            });
        });
    };
 });