javascript - 无法在表 td 中使用 Bootstrap Toggle？

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来完成此操作。

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>