щелкните в любом месте страницы, и popover должен исчезнуть

Question

У меня есть значок, который, если вы нажмете на него, появится popover с некоторыми данными, заполненными веб-сервисом. но проблема в том, что я хочу, чтобы popover появлялся всякий раз, когда я нажимаю на него, и исчезает всякий раз, когда я нажимаю в другом месте на странице!

Не могли бы вы сообщить мне, как я могу это сделать?

PS: Я уже опробовал триггер: «ручной», но это не сработало для моего примера!

Мой код здесь:

$('#myIcon').click(function (e) { 
    e.preventDefault(); 
    var $this = $(this); 
    $.ajax({ 
       type: "POST", 
       url: "myURL" 
      }).done(function (data) {           
       $this.popover({ 
        placement:'bottom',           
        content: function() { 
         html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>"; 
         for (var i = 0; i < data.length; i++) { 
          html = html + "<tr><td>" + data[i]['username'] + "</td></tr>"; 
         } 
         html = html + "</tbody></html>"; 
         return html; 
        }, 
        html: true, 
       }) 
      }); 
}); 

Answer 1

Вы могли бы попробовать, если это работает для вас.

Когда вы показываете popover, добавьте одноразового клише для всего тела, которое скрывает popover.

$('#myIcon').click(function (e) { 
    e.preventDefault(); 
    var $this = $(this); 
    $.ajax({ 
       type: "POST", 
       url: "myURL" 
      }).done(function (data) {           
       $this.popover({ 
        placement:'bottom',           
        content: function() { 
         html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>"; 
         for (var i = 0; i < data.length; i++) { 
          html = html + "<tr><td>" + data[i]['username'] + "</td></tr>"; 
         } 
         html = html + "</tbody></html>"; 
         return html; 
        }, 
        html: true, 
       }); 
       $('body').one('click',function(ev){ 
        ev.preventDefault(); 
        $this.popover('hide'); 
       }); 
      }); 
}); 

Answer 2

popover есть метод, как hideOnHTMLClick, который говорит Hide popovers when clicked outside of them.

$('#myIcon').click(function (e) { 
    e.preventDefault(); 
    var $this = $(this); 
    $.ajax({ 
       type: "POST", 
       url: "myURL" 
      }).done(function (data) {           
       $this.popover({ 
        placement:'bottom', 
        hideOnHTMLClick: true,           
        content: function() { 
         html = "<table class='table table-bordered ' id='myTbl'><tbody id='myTblBody'>"; 
         for (var i = 0; i < data.length; i++) { 
          html = html + "<tr><td>" + data[i]['username'] + "</td></tr>"; 
         } 
         html = html + "</tbody></html>"; 
         return html; 
        }, 
        html: true, 
       }) 
      }); 
});