[英]Adding Bootstrap component to an HTML element on RUNTIME doesn't render properly
Objective: I am trying to build an INNER HTML with a Bootstrap component upon click of a Button. 目标:单击按钮后,我试图使用Bootstrap组件构建内部HTML。
Problem: Bootstrap component is not getting rendered properly. 问题: Bootstrap组件未正确呈现。
Observation: When I change the bootstrap component as innerHtml
of a div
the value is added as it is and not unfolded into bootstrap component itself. 观察:当我将引导程序组件更改为
div
的innerHtml
,将按innerHtml
添加该值,而不是将其展开为引导程序组件本身。
Expected 预期
<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>
Actual 实际
<div id="issue">
<input id="view-toggle" checked="" data-toggle="toggle" data-on="On" data-off="Off" type="checkbox">
</div>
Code: 码:
HTML 的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 JS
$('#submit').click(function () {
$('#issue').html('<input id="view-toggle" checked data-toggle="toggle" data-on="On" data-off="Off" type="checkbox" />');
});
I am sure there has to be a way to get around this problem. 我确信必须有一种解决此问题的方法。 Or may be I am doing something wrong.
还是我做错了什么。
Please guide. 请指导。 TIA.
TIA。
Jquery binds all functions to elements on page load, you'll need to bind event to [data-toggle='toggle']
manually when DOM changes. jQuery在页面加载时将所有函数绑定到元素,当DOM更改时,您需要手动将事件绑定到
[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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.