【发布时间】：2021-04-26 03:05:43
【问题描述】：
我正在尝试在我的 bootstrap 5 弹出窗口中使用 html。我稍微更改了代码以从特定 div 获取 html 内容（不想使用 data-bs-content="" 属性）。
当前代码如下所示：
$(document).ready(function(){
// popover
$("[data-bs-toggle=popover]").each(function(i, obj) {
var id = $(this).attr('id')
$(this).popover({
container: 'body',
html: true,
placement: 'right',
// trigger: 'focus',
customClass: '' + id +'-pop',
sanitize: false,
content: function () {
return $('#popover-content-' + id).html();
}
});
}); // popover each
// update input fields in hidden popover content div
$(document).on('keyup', ".trigger-pop input[type=text]",function () {
var inputid = $(this).attr('id');
var inputdata = $(this).val();
$('#popover-content-trigger').find('#'+ inputid).val(inputdata);
});
// chkbx on/off toggle "fix"
$("#custombutton").on('change', function() {
var id = $(this).attr("id");
if ($(this).prop("checked")) {
$('label[for="' + id + '"]').removeClass("btn-outline-primary").addClass("btn-primary");
} else {
$('label[for="' + id + '"]').removeClass("btn-primary").addClass("btn-outline-primary");
}
});
});<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<button type="button" id="trigger" class="btn btn-secondary mt-1 mb-2 " data-bs-toggle="popover" data-bs-placement="right" >Trigger</button>
<div id="popover-content-trigger" style="display:none;" >
<div class="content">
<div class="row popover-header mb-3" style="margin:-16px -16px 0 -16px;padding-top:8px;padding-bottom:5px;">
<div class="col-12">
<input type="checkbox" class="btn-check" id="custombutton" autocomplete="off">
<label class="btn btn-outline-primary" for="custombutton">Some option</label>
</div>
</div>
<div class="row justify-content-around">
<div class="col-12" >
<div class="form-floating mb-1">
<input type="text" class="form-control" id="input1" placeholder="Input 1" autocomplete="off" >
<label for="input1">Input 1</label>
</div>
<div class="form-floating mb-1">
<input type="text" class="form-control" id="input2" placeholder="Input 2" autocomplete="off" >
<label for="input2">Input 1</label>
</div>
</div>
</div>
<br>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>我想记住弹出框隐藏后的所有数据（输入值，复选框状态..）。
目前在popover关闭后它实际上“被销毁”并且在下一次初始化后输入字段为空...... 我该如何解决这个问题？
谢谢。
【问题讨论】：
-
以不同用户的身份提出相同的问题并不等同于获得更多答案。与#67238348 重复
-
打算用这个设置赏金..谢谢
-
嗨，您可以将用户在输入中输入的值存储在本地存储或您的 dom 中的某个位置，并在弹出窗口打开时检索它。
-
这也是我的想法，但是，我遇到了问题，因为我的 html 包含一些具有 uniqe id 的不同输入类型（文本、复选框等），并且当我初始化其中一些更改时（复选框例如）它不能正常工作，因为文档包含具有相同 ID 的多个元素。我找到了解决方案并将其作为答案发布，谢谢！
标签： javascript jquery bootstrap-5