Bootstrap 5 -动态弹出窗口隐藏后不会打开

flvlnr44  于 2023-02-27  发布在  Bootstrap
关注(0)|答案(1)|浏览(224)

我尝试使用click作为触发器,使用下面的代码动态地打开一个基于自定义选择器属性的弹出窗口。

var popoverTriggerEl = $('body');
_popover = new bootstrap.Popover(popoverTriggerEl, {
  container: 'body',
  html: true,
  placement: "bottom",
  trigger: 'click',
  selector: '[people-card="click-action"]',
  customClass: 'dpn-peoplecard',
  content: function(event) {
    return 'test';
  }
});

但是当我尝试使用下面的代码关闭文档点击时打开的弹出窗口时,弹出窗口被完全隐藏,下次点击时不会打开。

$(document).click(function(e) {
  if ($(e.target).parent().find('[people-card="click-action"]').length > 0) {
    $('[people-card="click-action"]').popover('hide');
  }
});

我已经根据我的要求准备了一个Jsfiddle,其中有两个按钮具有相同的选择器。如果我们试图通过第一次单击任何按钮来打开弹出窗口,弹出窗口将被打开。但是一旦文档单击发生并且弹出窗口被隐藏,我们就无法通过其他选择器按钮单击来打开任何弹出窗口。

注意:我正在显示一些html内容,这些内容在引导弹出内容中包含一些单击事件。

JsFiddle Here
请告诉我我在这里犯的错误

oyxsuwqo

oyxsuwqo1#

应该使用focus事件而不是click事件(文档示例):

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button tabindex="0" type="button" id="button1" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Dismissible popover" data-bs-placement="bottom">Show Popover</button>

<button tabindex="0" type="button" id="button2" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Dismissible popover" data-bs-placement="bottom">Show Popover</button>

相关问题