bootstrap 5 popover needs to click twice before showing-CodePudding

I'm having a problem with my popover script. needs to click twice before showing the popover content itself. take not that im passing a dynamic parameter to dynamic popover content.

html element

<a  id="popoverButtonApproval" onclick="InitPopover(requestId, status)">
   <i ></i>
</a>

function InitPopover(requestId, status) {

let menuRequest = '<div style="display: none;" >'  
    '<ul >'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> View</span>'  
    '</li>'  
    '</a>'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> Approve</span>'  
    '</li>'  
    '</a>'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> Edit</span>'  
    '</li>'  
    '</a>'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> Reject</span>'  
    '</li>'  
    '</a>'  
    '</ul>'  
    '</div>';

$('#popoverButtonApproval').popover({
    "html": true,
    trigger: 'click',
    placement: 'bottom',
    "content": function () {
        return menuRequest;
    }
}).click(function (e) {
    $(this).popover('show');
    e.stopPropagation();
});
}

CodePudding user response：

This is because you only initialize the popover only on first click

CodePudding user response：

move popover listener outside, add it once, and return menu instead:

$(document).ready(function() {
  $('#popoverButtonApproval').popover({
    "html": true,
    trigger: 'click',
    placement: 'bottom',
    "content": function() {
      return InitPopover();
    }
  }).click(function(e) {
    $(this).popover('show');
    e.stopPropagation();
  });

});

function InitPopover(requestId, status) {


  return '<div style="display: none;" >'  
    '<ul >'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> View</span>'  
    '</li>'  
    '</a>'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> Approve</span>'  
    '</li>'  
    '</a>'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> Edit</span>'  
    '</li>'  
    '</a>'  
    '<a  id="'   requestId   '|'   status   '">'  
    '<li >'  
    '<span><i ></i> Reject</span>'  
    '</li>'  
    '</a>'  
    '</ul>'  
    '</div>';



}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Optional JavaScript; choose one of the two! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<a  id="popoverButtonApproval" onclick="InitPopover('requestId', 'status')">
  <i ></i>popoverButtonApproval
</a>