Estoy tratando de crear una función que muestre la ventana emergente con un evento de clic manual. Mi objetivo es completar la ventana emergente y mostrar los datos más recientes a través de una llamada ajax después de cada clic.

El problema al que me enfrento se describe en el título.

Por ejemplo:

 1st click -> call once 2nd click -> call twice 3rd click -> call once 4th click -> call twice ...

El código se ve así:

 $popoverButton.popover({ container: 'body', template: `<div></div>`, title: 'title', content: function () { console.log('*'); // this called twice on every second click let id = $(this).attr('data-id'); return initPopover(id); }, html: true, trigger: 'manual', }); function initPopover(id) { let $popover = $('<div class="popover-body"></div>'); $popover.attr({'id': 'popover-body-' + id}); let $spinner = $(`<div class="spinner"><span class="spinner-border"></span></div>`); $popover.append($spinner); let $sellers = $('<div class="sellers"></div>'); $popover.append($sellers); return $popover; }

Para abrir el popover, declaré el evento de clic con estas funciones:

 $popoverButton.on('click', function () { closePopover(); openPopover($(this)); }); closePopover() { $popoverButton.popover('hide'); } openPopover($targetButton) { // hide all opened popovers $('.popover').popover('hide'); $targetButton.popover('show'); getSellersAndAppendData(); }

No estoy seguro de por qué sucedió esto. Por favor ayuda.