第二次显示 popover 改变了它的位置

Question

我有一个函数可以在我的页面中创建弹出窗口，从 AJAX 调用中检索内容。在创建过程中，我的函数更改了弹出窗口的位置（它是全页的，所以我将 left 属性设置为 0 并移动箭头以指向我的元素）。 第一次 一切正常，但如果我将鼠标移出然后再次移入，弹出窗口不会从其默认位置移动（箭头也不会移动）

我的代码：

var last_opened_popover = null
jQuery(document).ready(function(){
    jQuery("*[data-poload]").mouseenter(function(){
        if (last_opened_popover != null){
            last_opened_popover.popover("destroy")
        }
        var element = jQuery(this)
        last_opened_popover = element
        var polId = element.data("poload")
        jQuery.ajax({
             url : my_url,
             type : "POST",
             data : {
                 //datas
         },
         success : function(result){
            var supporter_list = compose_supporter_list(result);
            var left = element.position().left + 75
            element.popover({
                content : supporter_list,
                html : true,
                placement : "bottom",
                template : '<div id="shown-popover" class="popover pgsc-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            })
            element.popover("show")
            var popover = jQuery("#shown-popover")
            popover.css("left", 0)
            popover.find(".arrow").css("left", left)
         }
      })
    }).mouseleave(function(){
       jQuery(this).popover("destroy")
    })
})

Answer 1

问题是所有生成的弹出窗口共享相同的 ID。即使我在创建另一个之前销毁了每个元素，ID 也会以某种方式保留下来，因此 jQuery 无法访问新元素。解决方案是简单地生成新的 ID 以确保没有 popover 共享相同的 ID，我通过简单地使用计数器来做到这一点：

var last_opened_popover = null
var popover_counter = 0
jQuery(document).ready(function(){
    jQuery("*[data-poload]").mouseenter(function(){
        if (last_opened_popover != null){
            last_opened_popover.popover("destroy")
        }
        var element = jQuery(this)
        last_opened_popover = element
        var polId = element.data("poload")
        jQuery.ajax({
             url : my_url,
             type : "POST",
             data : {
               //datas
             },
             success : function(result){
                var supporter_list = compose_supporter_list(result);
                var left = element.position().left + 75
                element.popover({
                    content : supporter_list,
                    html : true,
                    placement : "bottom",
                    template : '<div id="shown-popover-' + popover_counter  + '" class="popover pgsc-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
               })
               element.popover("show")
               var popover = jQuery("#shown-popover-" + popover_counter)
               popover.css("left", 0)
               popover.find(".arrow").css("left", left)
               popover_counter++
            }
    })
})

第二次显示 popover 改变了它的位置

Showing popover for the second time changes its position

javascript

jquery

twitter-bootstrap

bootstrap-popover