Bootstrap 4 开关在弹出窗口中不起作用
[英]Bootstrap 4 switch not working in popover
问题描述
I am trying to include a switch inside a Popover, created using Bootstrap 4. The problem is that the switch works output the popover but not inside.
我正在尝试在使用 Bootstrap 4 创建的弹出框内包含一个开关。问题是该开关在弹出框中有效，但不在里面。
Example例子
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="chkPrv">
<label class="custom-control-label" for="chkPrv">Output Popover</label>
</div>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover">Click to toggle popover</button>
<div id="PopoverContent" class="d-none">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="chkPal">
<label class="custom-control-label" for="chkPal">Input Popover</label>
</div>
</div>
<script>
$('[data-toggle="popover"]').popover(
{
html: true,
sanitize: false,
content: function () { return $("#PopoverContent").html(); }
});
</script>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2021-03-09 00:05:08
The problem is that the DOM has two elements with id="chkPal" : one in the hidden div, and a second one that appears in the popover content after your JS runs.问题是 DOM 有两个id="chkPal"元素：一个在隐藏的 div 中，另一个在 JS 运行后出现在弹出内容中。 Valid HTML requires elements have unique ids.有效的 HTML 要求元素具有唯一的 ID。
When you click the switch label in the popover, the switch in the hidden div is being thrown, because it occurs first in the DOM.当你点击弹窗中的开关 label 时，隐藏 div 中的开关被抛出，因为它首先出现在 DOM 中。
To solve this, try using the template HTML tag .要解决此问题，请尝试使用template HTML tag 。 Caution: it's not fully supported by older Microsoft browsers .注意：旧版 Microsoft 浏览器不完全支持它。 If that's an issue, you could write the content in your JS instead of HTML.如果这是一个问题，您可以在 JS 中而不是 HTML 中编写内容。
Check out the snippet below.看看下面的片段。
$('[data-toggle="popover"]').popover( { html: true, sanitize: false, content: function () { return $("#PopoverContent").html(); } });
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> </head> <body> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="chkPrv"> <label class="custom-control-label" for="chkPrv">Output Popover</label> </div> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" id="popoverSwitch">Click to toggle popover</button> <template id="PopoverContent"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="chkPal"> <label class="custom-control-label" for="chkPal">Input Popover</label> </div> </template> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.