bootstrap popover 需要双击才能被触发

Question

单击时我有一个 div，它应该会触发一个弹出框并显示一个单独的 div，它工作正常。问题是，当您单击外部 div 显示弹出框后，它会删除弹出框，但在您单击弹出框 div 以再次显示弹出框时删除弹出框后，您必须单击两次才能触发它。为什么需要点击两次？我该如何解决这个问题，以便它始终一键运行？任何帮助表示赞赏。提前致谢

更新：

我尝试使用它来解决它，但它也不起作用。 它在 bootstrap 5 上完全不起作用，但在 bootstrap 4 上它能够捕捉到点击没有触发弹出窗口但解决方案不起作用。尝试过的解决方案：

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover")._activeTrigger.click = true
});

$(function() {
  $(".testDiv").popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
      $('.testDivCon').show()
      $('.wifiInfoContent').append('<button class="testButton">Click Me</button>')
      return $('.wifiInfoContent').html();
    }
  });

});

$('.testDivCon').on('click', function() {
  $('.popover').remove()
  $('.testDivCon').hide()
})

$(document).on('click', '.testButton', function() {
  console.log('clicked')
})

.testDivCon {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: green;
}

.testDiv {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 20%;
  height: 15%;
  background-color: black;
}

.wifiInfoContent {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="testDivCon"></div>
<div class="testDiv"></div>

<div class="wifiInfoContent"></div>

Answer 1

您需要正确移除弹出框：

$('.testDiv').popover('hide');

$(function() {
  $(".testDiv").popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
      $('.testDivCon').show()
      $('.wifiInfoContent').append('<button class="testButton">Click Me</button>')
      return $('.wifiInfoContent').html();
    }
  });

});

$('.testDivCon').on('click', function() {
  $('.testDiv').popover('hide');
  $('.testDivCon').hide();
})

$('.testDiv').on('click',function() {
  $('.testDivCon').hide()
});

$(document).on('click', '.testButton', function() {
  console.log('clicked')
});

.testDivCon {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: green;
}

.testDiv {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 20%;
  height: 15%;
  background-color: black;
}

.wifiInfoContent {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="testDivCon"></div>
<div class="testDiv"></div>

<div class="wifiInfoContent"></div>

---

---

您不需要 jQuery 来实现这一点，并且也可以在 bootstrap 5 中完美地做到这一点：

const popoverTrigger = document.querySelector('.testDiv');
const popover = new bootstrap.Popover(popoverTrigger, {
  html: true,
  sanitize: false,
  content: '<button class="testButton">Click Me</button>'
});

let testDivConShown = false;

popoverTrigger.addEventListener('click', function(){
  testDivConShown = !testDivConShown;
  document.querySelector('.testDivCon').style.display = testDivConShown ? 'block' : 'none';
});

document.querySelector('.testDivCon').addEventListener('click', function() {
    popover.hide();
    testDivConShown = false;
    document.querySelector('.testDivCon').style.display = 'none';
});
  
document.body.addEventListener('click', function(e) {
  if(e.target.classList.contains('testButton'))
  console.log('button clicked');
});

.testDivCon {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: green;
}

.testDiv {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 20%;
  height: 15%;
  background-color: black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<div class="testDivCon"></div>
<div class="testDiv" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom"></div>

<div id="wifiInfoContent" class="d-none"><button class="testButton">Click Me</button></div>