jquery - webui弹出窗口不关闭

Question

我使用webui popover我的代码是：

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

pre_elem_at = document.createElement("a");
                        pre_elem_at.setAttribute("class", "show-pop-async");
                        pre_elem_at.setAttribute("href", "javascript:void(0)");
                        pre_elem_at.setAttribute("style", "font-size: 14px;margin-left: 15px;background-color: white;padding: 5px;cursor: pointer;");
                        pre_elem_at.innerHTML = 'Get Link';
                        pre_elem_at.post_id = posts[i].id;
                        // $(pre_elem_at).webuiPopover();

                        $(pre_elem_at).webuiPopover('destroy').webuiPopover({
                            type:'async',
                            url:'timeline/pullrequest/share_post?share_link=1&cred='+posts[i].id,
                            content:function(data){

                                data = JSON.parse(data);
                                var html ='<div style="margin:0px; width:100%; overflow:hidden;" class="input-group mb-3">';
                                html += '<div class="input-group-prepend">';
                                html += '<button style="border-radius:2px 0 0 2px;" class="btn btn-primary btn-outline-secondary" type="button">Copy</button>';
                                html += '</div>';
                                html += '<input style="color:#333" value="'+data.share_link+'" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">';
                                html += '</div>';
                                return html;
                        },
                        width:'397',
                        height:'16',
                        padding:false,
                        margin:false,
                         trigger: 'click',
                        cache:false,
                        multi:false

                    });
}

它工作得很好，但我有一个问题..弹出框没有关闭..即使我添加了'closeable：true'并单击了“x”图标..它仍然没有关闭..如果我删除 type:async 属性它将关闭popover 正确，但我无法在其中加载我的 div。因为它是一个ajax调用。

Answer 1

我在 pre_elem_at.addEventListener 上添加了 webui 弹出框启动

pre_elem_at.addEventListener("click",function(e){
                            var pid = e.target.post_id;
                            $(this).webuiPopover({
                            type:'async',
                            url:'timeline/pullrequest/share_post?share_link=1&cred='+pid,
                            content:function(data){

                                data = JSON.parse(data);
                                var html ='<div style="margin:0px; width:100%; overflow:hidden;" class="input-group mb-3">';
                                html += '<div class="input-group-prepend">';
                                html += '<button style="border-radius:2px 0 0 2px;" class="btn btn-primary btn-outline-secondary" type="button">Copy</button>';
                                html += '</div>';
                                html += '<input style="color:#333" value="'+data.share_link+'" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">';
                                html += '</div>';
                                return html;
                        },
                        width:'397',
                        height:'16',
                        padding:false,
                        margin:false,
                         trigger: 'click',
                        cache:false,
                        multi:false
                    });
                    $(this).webuiPopover('show');
                });

并在我的索引文件上添加了一个 webui 销毁器

//更新以排除弹出框

$(document).on('blur','.show-pop-async, .xpopover',function(e){
var xthis = this;
setTimeout(function(){
   elem = document.activeElement; // This is the element that has focus
   str = $(elem).attr('class');
   arr = str.split(" ");
   n = arr.includes("xpopover");
    if(!n){
      $('.show-pop-async').webuiPopover('destroy');
    }

},1);

});