為什麼我的 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

');
        
    });