bootstrap toggle in bootstrap table

Question

Ich verwende ein bootstrap toggle styled checkbox (data-toggle = "toggle"). Das hat perfekt funktioniert, keine Probleme. Wenn ich dieses Kontrollkästchen jedoch innerhalb einer Bootstrap-Tabelle (data-toggle = "table") ankreuze, funktioniert das Kontrollkästchen Bootstrap toggle nicht mehr ordnungsgemäß.
Insbesondere wird das Änderungsereignis ausgelöst, aber das Kontrollkästchen/die Schaltfläche zeigt das gleitende Ein/Aus-Verhalten nicht mehr an. Ich habe dies nur auf den Fall beschränkt, wenn die enthaltende Tabelle das Element data-toggle = "table" enthält.
Hat jemand dies gefunden und eine Lösung gefunden?
Hier demonstriert meine jsFiddle dieses Problem: 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')); 
}); 

Answer 1

Es sieht aus wie die Plug-ins, die Sie nicht ausgelegt sind, verwenden die Wiedergabe zu handhaben von verschachtelten Plugin-Elementen. Wenn Sie die Quelle nicht ändern möchten, können Sie die Toggle-Schalter dynamisch hinzufügen und initialisieren, nachdem das Bootstrap-Tabellen-Plugin initialisiert wurde.

Fügen Sie einen <span class="toggle-placeholder" /> Platzhalter hinzu, an dem Sie einen Wechselschalter wünschen. Dann initialisieren alle:

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

Wie Sie sehen können, $checkbox ist Ihre HTML für die Toggle, die Sie vorher in Ihrem Markup gehabt hätte. Dann setzen wir den Platzhalterinhalt als $checkbox html, dann initialisieren wir für jedes .toggle-placeholder auf der Seite das Bootstrap-Toggle-Plugin.

Nun ist dies ein grobes Beispiel, bei dem jeder Schalter derselbe wäre, aber Sie könnten jeden durch Einfügen Ihrer Einstellungen in den Platzhalter schneiden. Von hier aus könnte die neue Initialisierungsfunktion diese dann durch Lesen der Platzhalterattribute der Checkbox zuordnen.

Answer 2

Zuerst eine Klasse zu Ihrer Eingabe hinzufügen

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

dann diese Zeile hinzu:

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

danach:

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

Hoffnung, dies hilft Ihnen