如何在未聚焦时隐藏 webui-popover (JQuery)

Question

我有一个动态填充的 table 并且我已将一个 webui-popover 附加到每个 table 行。要使其可见，必须单击 link 项。我正在使用手动触发器来控制它的可见性。

但是我的问题是，当一个弹出窗口可见时，当我在弹出区域外单击时无法隐藏它。该文档允许将 dismissable 设置为 true 但这也不起作用。感谢任何帮助。

 //Sample html
 <tr>
  <td>name</td>
    <td><a class="more" id="'.$id.'" data-fid="'.$fid.'" data-uplid="'.$uplid.'"  href="javascript:void(0);"><i class="material-icons">more_horiz</i></a></td>
   </tr>

Javascript 用于显示动态弹出窗口

var more = document.getElementsByClassName('more');

for (var i = 0; i < more.length ; i++) {

    var fid, uplid;

    more[i].onclick = function(){

     fid = this.dataset.fid;
     uplid = this.dataset.uplid;

     //Popover
     $('#' + fid).webuiPopover({
      content: function(){
       var html = '<div id="pop-content">';
        html += '<a href="core/upload/'+fid+'/'+uplid+'" class="collection-item active">Edit</a>';
        html += '</div>';
        return html;
      },
      trigger: 'manual',
      dismissible: true,
      style: 'v2',
      placement: 'bottom-left',
      animation: 'pop',
      width: '180',
      cache: false
     });

    //Once the values have been passed, show the popover
    $('#' + fid).webuiPopover('show');
  }
}

一旦鼠标不在目标中，我需要让它隐藏，有什么想法吗？

Answer 1

您必须使用：

trigger: 'click'

此外，删除 'onclick' 事件侦听器和封装弹出窗口内容的函数：

JSFIDDLE

如何在未聚焦时隐藏 webui-popover (JQuery)

How to hide webui-popover when not in focus (JQuery)

javascript

jquery

popover