不能使用Bootstrap在表td內切換？

Question

我使用bootstraptoggle生成html表格如下。

var configTableDiv = document.getElementById('exportListContent'); 

output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>'; 

configTableDiv.innerHTML = configTableDiv.innerHTML + output; 

但相關的功能或設計不在表td內工作。它顯示正常複選框。有沒有解決方法？

這裏是相關的html輸出。

<td><input id="toggle-mode" type="checkbox" checked="" data-toggle="toggle" data-onstyle="warning" data-offstyle="info" data-on="Kite" data-off="InAppPurchase"></td> 

Answer 1

你的代碼工作完美的只是確保你有jquery.js，bootstrap-toggle.min.js，bootstrap.min.css和bootstrap-toggle.min.css

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
 

 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 
 

 
<td><input id="toggle-mode" type="checkbox" checked="" data-toggle="toggle" data-onstyle="warning" data-offstyle="info" data-on="Kite" data-off="InAppPurchase"></td>

Answer 2

可以使用jquery做到這一點。

var configTableDiv = document.getElementById('exportListContent'); 
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>'; 
configTableDiv.innerHTML = configTableDiv.innerHTML + output; 
$('#toggle-mode').bootstrapToggle(); 

var configTableDiv = document.getElementById('exportListContent'); 
 
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>'; 
 
configTableDiv.innerHTML = configTableDiv.innerHTML + output; 
 
$('#toggle-mode').bootstrapToggle();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 
 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 
<table id="exportListContent"> 
 
</table>

Answer 3

我覺得它工作正常。

var configTableDiv = document.getElementById('exportListContent'); 
 

 
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>'; 
 

 
configTableDiv.innerHTML = configTableDiv.innerHTML + output;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
 

 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 
 

 
<table id="exportListContent"></table>