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

问题是 all 生成的popover共享相同的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改变了它的位置

1 个答案: