Webui Popover не закрывается

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, оно будет корректно закрывать поповер, но я не могу загрузить свой div внутри него. так как это вызов ajax.

Answer 1

Я добавил инициацию всплывающего окна webui на pre_elem_at.addEventListener

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);

});