引導彈出視窗需要雙擊才能被觸發

單擊時我有一個 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 >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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

您需要正確洗掉彈出框：

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

$(function() {
  $(".testDiv").popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
      $('.testDivCon').show()
      $('.wifiInfoContent').append('<button >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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：

上一篇：發布系統中的Javascript問題

下一篇：如何從Kubernetes集群中卸載ArgoCD？