Bootstrap 4 开关在弹出窗口中不起作用答案

【问题标题】：Bootstrap 4 switch not working in popoverBootstrap 4 开关在弹出窗口中不起作用
【发布时间】：2021-03-04 18:20:02
【问题描述】：

我正在尝试在使用 Bootstrap 4 创建的弹出框内包含一个开关。问题是该开关可以输出弹出框但不在里面。

示例

<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>

【问题讨论】：

标签： twitter-bootstrap switch-statement popover

【解决方案1】：

问题在于 DOM 有两个带有 id="chkPal" 的元素：一个在隐藏的 div 中，另一个在 JS 运行后出现在弹出内容中。有效的 HTML 要求元素具有唯一的 ID。

当你点击弹窗中的开关标签时，隐藏的 div 中的开关被抛出，因为它首先出现在 DOM 中。

要解决此问题，请尝试使用 template HTML tag。注意：它是not fully supported by older Microsoft browsers。如果这是一个问题，您可以在 JS 中而不是 HTML 中编写内容。

查看下面的 sn-p。

$('[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>

【讨论】：

该死，我没想到重复的 id。既然您这么说，那么内容复制就很明显了。感谢您的解释，以及我不知道的模板标签。干得好。