第二次显示弹出框会改变它的位置答案

【问题标题】：Showing popover for the second time changes its position第二次显示弹出框会改变它的位置
【发布时间】：2016-02-24 16:51:56
【问题描述】：

我有一个函数可以在我的页面中创建弹出框，从 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")
    })
})

【问题讨论】：

url : my_url type : "POST", 上缺少的逗号只是一个错字吗？
您可能正在处理与所有缺少分号有关的问题（在代码中尝试使用它们）
您认为这可能并非如此：var element = jQuery(this) last_opened_popover = element var polId = element.data("poload")
您是否对 JS 代码进行了任何压缩？什么是compose_supporter_list
polId 似乎没有使用？

标签： javascript jquery twitter-bootstrap bootstrap-popover

【解决方案1】：

问题在于所有生成的弹出框共享相同的 ID。即使我在创建另一个之前销毁了每个，ID 还是会以某种方式保留，因此 jQuery 无法访问新元素。解决方案是简单地生成新的 ID 以确保没有弹出框共享相同的 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++
            }
    })
})

【讨论】：