bootstrap popover needs double click in order to be triggered

Question

I have a div when clicked it is supposed to trigger a popover and show a separate div and it works fine. The problem is after the popover is displayed when you click on the external div it removes the popover but after removing the popover when you click on the popover div to show the popover again you have to click twice in order to trigger it. Why does it need to be clicked twice? how can I fix this so that it always works with one click? Any help is appreciated. Thanks in advance

Update:

I tried using this to solve it but it doesn't work too. It completely doesn't work on bootstrap 5 but on bootstrap 4 its able to catch that the click didn't trigger the popover but the solution doesn't work. Tried solution:

$('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('')
      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;
}

prettyInPink · Accepted Answer

You need to correctly remove the popover:

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

$(function() {
  $(".testDiv").popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
      $('.testDivCon').show()
      $('.wifiInfoContent').append('')
      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;
}

You don't need jQuery to achieve this and can perfectly do this in bootstrap 5 as well:

const popoverTrigger = document.querySelector('.testDiv');
const popover = new bootstrap.Popover(popoverTrigger, {
  html: true,
  sanitize: false,
  content: ''
});

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;
}

bootstrap popover needs double click in order to be triggered

Answers (1)

Related Questions