目标:我正在尝试通过单击按钮构建带有 Bootstrap 组件的 INNER HTML。
问题:Bootstrap 组件未正确呈现。
观察: 当我将 Bootstrap 组件更改为 div 的 innerHtml 时，值按原样添加，而不是展开到 Bootstrap 组件中本身。
预期
<div id="issue">
<div class="toggle btn btn-primary" data-toggle="toggle" style="width: 60.3438px; height: 38px;"><input id="view-toggle" checked="" data-toggle="toggle" data-on="On" data-off="Off" type="checkbox">
<div class="toggle-group"><label class="btn btn-primary toggle-on">On</label><label class="btn btn-default active toggle-off">Off</label><span class="toggle-handle btn btn-default"></span></div>
</div>
</div>
实际
<div id="issue">
<input id="view-toggle" checked="" data-toggle="toggle" data-on="On" data-off="Off" type="checkbox">
</div>
代码:
HTML
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<input id="submit" type="button" value="submit" />
<div id="issue">
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
JS
$('#submit').click(function () {
$('#issue').html('<input id="view-toggle" checked data-toggle="toggle" data-on="On" data-off="Off" type="checkbox" />');
});
我确信必须有办法解决这个问题。或者可能是我做错了什么。
请指导。 TIA。
最佳答案
Jquery 在页面加载时将所有函数绑定(bind)到元素，您需要在 DOM 更改时手动将事件绑定(bind)到 [data-toggle='toggle']。
$("[data-toggle='toggle']").bootstrapToggle();
$('#submit').click(function() {
$('#issue').html('<input id="view-toggle" checked data-toggle="toggle" data-on="On" data-off="Off" type="checkbox" />');
$("[data-toggle='toggle']").bootstrapToggle();
});<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<input id="submit" type="button" value="submit" />
<div id="issue">
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>关于javascript - 将 Bootstrap 组件添加到运行时的 HTML 元素无法正确呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45879986/