Bootstrap 4 switch not working in popover
Question
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.
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 answers
solution1
0 ACCPTED 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. Valid HTML requires elements have unique ids.
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.
To solve this, try using the template HTML tag . Caution: it's not fully supported by older Microsoft browsers . If that's an issue, you could write the content in your JS instead of 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.