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

Question

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

然而，我的问题是，当一个弹出窗口可见时，当我单击弹出区域之外时，我无法隐藏它。该文档允许将可解雇设置为 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