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

Question

我正在尝试在使用 Bootstrap 4 创建的 Popover 中包含一个开关。问题是开关可以输出 popover，但不能输出 popover。

例子

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

Answer 1

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

当您单击弹出窗口中的开关标签时，将抛出隐藏 div 中的开关，因为它首先出现在 DOM.

中

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

查看下面的代码片段。

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

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

Bootstrap 4 switch not working in popover

switch-statement

popover

twitter-bootstrap