为什么我的 Bootstrap 5 弹出窗口在关闭并重新打开它所在的模式后失去了打开焦点的能力？

Question

我的 Bootstrap 5 模式和放置在其上的弹出窗口有问题。

在我的 HTML 中，我有以下内容，当用户将鼠标悬停在按钮上时，它会正确显示。弹出窗口显示“您确定吗？”键入提示并建议用户单击按钮（悬停）以继续。单击该按钮即可获取焦点并保持弹出窗口打开，直到再次单击或单击离开该元素。

这允许鼠标指针进入弹出窗口内容并单击“继续”按钮。

这就是我想要的东西：https://bootstrap-confirmation.js.org，但有一些有关按钮悬停时显示的功能的更多详细信息...

不管怎样，效果很好！第一次...如果模式被隐藏然后再次显示，则只有弹出窗口触发器的悬停部分起作用，并且单击按钮确实会触发它的侦听器，但弹出窗口拒绝保持打开状态（根据“焦点”触发器） )..

请帮忙，这让我发疯！

令人沮丧的是，下面的代码片段似乎确实有效，尽管在关闭并重新打开模式时会抛出错误，我不确定为什么？

编辑添加：Chrome 和 Safari 中均存在该问题，Safari 将创建控制台错误：

[Error] TypeError: undefined is not an object (evaluating 't.nodeType')

    o (bootstrap.bundle.min.js:6:823)
    _typeCheckConfig (bootstrap.bundle.min.js:6:7060)
    _getConfig (bootstrap.bundle.min.js:6:69112)
    W (bootstrap.bundle.min.js:6:7420)
    cn (bootstrap.bundle.min.js:6:62612)
    un
    (anonymous function) (locate_dev.js:394)
    dispatchEvent
    trigger (bootstrap.bundle.min.js:6:5516)
    (anonymous function) (bootstrap.bundle.min.js:6:52949)
    a (bootstrap.bundle.min.js:6:2488)
    dispatchEvent
    s (bootstrap.bundle.min.js:6:736)
    (anonymous function) (bootstrap.bundle.min.js:6:2539)

locate_dev.js 第 394 行的代码是弹出窗口初始化，可疑：

// 1 - Init the popover
        var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            content: $('[data-name="close-btn-popover-content"]')
        });

let locateScreen = new bootstrap.Modal(document.getElementById('locateScreen'));

const locateModal = document.getElementById('locateScreen')
locateModal.addEventListener('shown.bs.modal', event => {

  const locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
    html: true,
    sanitize: false,
    customClass: 'locate-footer-popover',
    title: "Are you sure?",
    //      trigger: 'focus',
    content: $('[data-name="close-btn-popover-content"]')
  });

  // 2 - Listen for clicks on the 'Close' button
  $('#locate-btn-close').off('click');
  $('#locate-btn-close').on('click', function() {

    // This is firing, but the popover is closing when the mouse moves towards
    // the buttons, after the modal is shown once, hidden, then re-displayed.

    // Show popover buttons in popover 
    $('[data-name="close-btn-popover-content"] .confirm-buttons').show();

    // Assign listeners to the popover confirm buttons
    //$('#locate-btn-close-confirm').off()
    $('#locate-btn-close-confirm').on('click', function() { // Close Session screen
      
      locateScreen.hide();
      
    });

    // Hide 'Click to continue' text
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').hide()
  });

  // When the popover is initially shown, hide the buttons and make sure the text reads:
  // 'click the button to continue', etc
  $('#locate-btn-close').on('inserted.bs.popover', function() {

    $('[data-name="close-btn-popover-content"] .confirm-buttons').hide()
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').show()
  });
  
  
});

locateModal.addEventListener('hidden.bs.modal', event => {
        
        // At this point the  $('[data-name="close-btn-popover-content"]') has been removed....
        // Lets add it back in
        $('#popover-close-btn-holder').html('<div data-name="close-btn-popover-content"><div class="col-sm-12 input-group-sm"><p>You can choose to close or save this session at the next screen.</p><p class="continue-text">Click the button to continue...</p></div><div class="text-center confirm-buttons" style="display:none;"><button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button><button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button></div></div>');
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#locateScreen">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="locateScreen" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Popover is on the Save Changes button. Click continue, which will hide the modal. Open it again from the button. On my own code the 'focus' part of the popover is lost and I can't get the mouse over the popover. Here it seems to work. No idea why. However the event listener on the confirm button is lost still.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <a id="locate-btn-close" tabindex="0" class="btn btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Save Changes</a>

        <!-- popover -->

        <div id="popover-close-btn-holder" class="d-none">
          <div data-name="close-btn-popover-content">
            <div class="col-sm-12 input-group-sm">
              <p class="continue-text">Click the button to continue...</p>
            </div>
            <div class="text-center confirm-buttons" style="display:none;">
              <button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button>
              <button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

似乎会产生错误，因为弹出窗口的内容在模式被隐藏和重新显示之间的某个时刻消失。

考虑：

var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            content: $('[data-name="close-btn-popover-content"]')
        });

测试 $('[data-name="close-btn-popover-content"]') 根本不返回任何内容。在初始化模式时（在初始化弹出窗口之前）手动将其附加到父 div 也没有帮助。

Answer 1

解决了！

我从按钮 HTML 中删除了 data-bs-trigger="hover focus" 属性并使用：

locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            trigger: 'hover focus',
            content: $('[data-name="close-btn-popover-content"]')
        });

我还需要在 'hidden.bs.modal' 上重建 $('[data-name="close-btn-popover-content"]') 中的内容，如下所示：

locateModal.addEventListener('hidden.bs.modal', event => {
        
        // At this point the  $('[data-name="close-btn-popover-content"]') has been removed....
        // Lets add it back in
        $('#popover-close-btn-holder').html('
You can choose to close or save this session at the next screen.
Click the button to continue...
CancelContinue
');
        
    });