Javascript 第二次显示popover会更改其位置
我有一个函数,可以在我的页面中创建弹出窗口,从AJAX调用中检索内容。在创建过程中,my函数更改了popover位置(它是一个页面宽度,因此我将Javascript 第二次显示popover会更改其位置,javascript,jquery,twitter-bootstrap,bootstrap-popover,Javascript,Jquery,Twitter Bootstrap,Bootstrap Popover,我有一个函数,可以在我的页面中创建弹出窗口,从AJAX调用中检索内容。在创建过程中,my函数更改了popover位置(它是一个页面宽度,因此我将left属性设置为0,并移动箭头指向my元素)。第一次一切正常,但如果我将鼠标移出,然后再移入,弹出框不会从默认位置移动(箭头也不会移动) 我的代码: var last_opened_popover = null jQuery(document).ready(function(){ jQuery("*[data-poload]").mouseen
left
属性设置为0,并移动箭头指向my元素)。第一次一切正常,但如果我将鼠标移出,然后再移入,弹出框不会从默认位置移动(箭头也不会移动)
我的代码:
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")
})
})
var last\u opened\u popover=null
jQuery(文档).ready(函数(){
jQuery(“*[datapoload]”)。mouseenter(函数(){
如果(上次打开的弹出窗口!=null){
上次打开的popover.popover(“销毁”)
}
var元素=jQuery(this)
上次打开的\u popover=元素
var polId=element.data(“poload”)
jQuery.ajax({
url:my_url,
类型:“POST”,
数据:{
//数据
},
成功:功能(结果){
var支持者列表=组成支持者列表(结果);
var left=element.position().left+75
元素。popover({
内容:支持者名单,
是的,
位置:“底部”,
模板:“”
})
元素。popover(“显示”)
var popover=jQuery(“显示的popover”)
css(“左”,0)
popover.find(“.arrow”).css(“左”,左)
}
})
}).mouseleave(函数(){
jQuery(this.popover)(“销毁”)
})
})
问题在于,所有生成的popover共享相同的ID。即使我在创建另一个popover之前对每个popover进行了销毁,该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++
}
})
})
var last\u opened\u popover=null
var popover_计数器=0
jQuery(文档).ready(函数(){
jQuery(“*[datapoload]”)。mouseenter(函数(){
如果(上次打开的弹出窗口!=null){
上次打开的popover.popover(“销毁”)
}
var元素=jQuery(this)
上次打开的\u popover=元素
var polId=element.data(“poload”)
jQuery.ajax({
url:my_url,
类型:“POST”,
数据:{
//数据
},
成功:功能(结果){
var支持者列表=组成支持者列表(结果);
var left=element.position().left+75
元素。popover({
内容:支持者名单,
是的,
位置:“底部”,
模板:“”
})
元素。popover(“显示”)
var popover=jQuery(#显示的popover-“+popover\u计数器)
css(“左”,0)
popover.find(“.arrow”).css(“左”,左)
爆米花计数器++
}
})
})
url:my_url type:“POST”上缺少的逗号只是一个输入错误吗?您可能正在处理一个与所有缺少的分号有关的问题(在代码中尝试使用分号)。您认为情况并非如此:var element=jQuery(此)上次打开的\u popover=element var polId=element.data(“poload”)
是否使用JS代码的任何压缩?什么是compose\u supporter\u list
polId
似乎未使用?