我想使用 jQuery 在弹出窗口中显示 div 内容。
在 Bootstrap 3 中它工作正常。但在 BS-5 中它不起作用。
这是我的代码:
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});body {
padding: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505706b756b74" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e051b051a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<a class="popper btn btn-outline-warning" data-trigger="hover" data-toggle="popover">Hover me</a>
<div class="popper-content d-none">My popover content goes here.</div>请帮我解答一下!
提前致谢。
最佳答案
当然，只需等待 jQuery 在 DOM 中准备好，用 $(function () {}) 包装它
$(function () {
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
})
})
关于jquery - 如何使用 jQuery 使用 bootstrap 5 popover？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68015075/