Javascript 隐藏后无法在Firefox中获取引导popover的父级
我正在使用引导弹出窗口向用户显示一些选项,并根据用户的操作,更新创建弹出窗口时同一行中的字段 要创建popover,请执行以下操作:Javascript 隐藏后无法在Firefox中获取引导popover的父级,javascript,Javascript,我正在使用引导弹出窗口向用户显示一些选项,并根据用户的操作,更新创建弹出窗口时同一行中的字段 要创建popover,请执行以下操作: $('a.popoverUpdateValue').on('focus', function() { var i = this $.ajax({ url: $(i).data('link'), dataType: "json", cache: true,
$('a.popoverUpdateValue').on('focus', function() {
var i = this
$.ajax({
url: $(i).data('link'),
dataType: "json",
cache: true,
success: function(data){
$(i).popover({
placement: 'top',
content: 'some content',
html: true
}).popover('show')
}
});
});
要关闭所有打开的弹出窗口,请执行以下操作:
$('a.popoverUpdateValue').on('blur',function() {
$('.popover:visible').popover('hide');
});
要更新字段,我希望捕获“click”事件,并使用目标(应该是popover上的一个按钮)访问某个类的最近父类。像这样:
$('body').on('click', function (e) {
if (e.target.hasAttribute('button-on-popover')) {
var action = e.target.getAttribute('my-action');
var target = $(this);
$.ajax({
url: 'some url',
dataType: "json",
async: false,
success: function(data){
if (action == 'update'){
// Replace icon
var mytd = $(e.target).closest('td.updateAvailable');
mytd.html('<span class="glyphicon glyphicon-ok"></span>');
}
// Lower number of updates in DOM
var num_updates = parseInt($('#num_updates').text());
$('#num_updates').text(num_updates - 1);
}
});
e.preventDefault();
} else {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
}
});
});
$('body')。在('click',函数(e){
if(e.target.hasAttribute('button-on-popover')){
var action=e.target.getAttribute('my-action');
var目标=$(此);
$.ajax({
url:“某个url”,
数据类型:“json”,
async:false,
成功:功能(数据){
如果(操作==“更新”){
//替换图标
var mytd=$(e.target.closest('td.updateAvailable');
mytd.html(“”);
}
//DOM中更新的次数较少
var num_updates=parseInt($('num_updates').text();
$('num_updates')。文本(num_updates-1);
}
});
e、 预防默认值();
}否则{
$('[data toggle=“popover”]')。每个(函数(){
如果(!$(this).is(e.target)&&&$(this).has(e.target).length==0&&$('.popover')。has(e.target).length==0){
$(this.popover('hide');
}
});
}
});
});
错误发生在if条件“if(action=='update')”中,因为找不到mytd,这只会在Firefox中失败,而在Chrome中工作正常。在我看来,这是因为在Firefox中,popover没有父代
popover是否可能在隐藏时丢失其父项?但为什么只在两个浏览器中的一个浏览器中
注意:我已经从代码中删除了一些敏感信息,但希望它是可以理解的 事实证明,问题似乎是在Firefox中,在ajax调用过程中,父子关系似乎在某个时候丢失了。我可以通过在ajax调用之前获取父对象来解决这个问题,如下所示(请参见以“var updateAvailableTd=…”开头的行):
$('body')。在('click',函数(e){
if(e.target.hasAttribute('button-on-popover')){
var action=e.target.getAttribute('my-action');
var目标=$(此);
var updateAvailableTd=e.target.closest('td.updateAvailable');
$.ajax({
url:“某个url”,
数据类型:“json”,
async:false,
成功:功能(数据){
如果(操作==“更新”){
//替换图标
$(updateAvailableTd.html(“”);
}
//DOM中更新的次数较少
var num_updates=parseInt($('num_updates').text();
$('num_updates')。文本(num_updates-1);
}
});
e、 预防默认值();
}否则{
$('[data toggle=“popover”]')。每个(函数(){
如果(!$(this).is(e.target)&&&$(this).has(e.target).length==0&&$('.popover')。has(e.target).length==0){
$(this.popover('hide');
}
});
}
});
事实证明,问题似乎是在Firefox中,在ajax调用过程中的某个时刻,父子关系似乎丢失了。我可以通过在ajax调用之前获取父对象来解决这个问题,如下所示(请参见以“var updateAvailableTd=…”开头的行):
$('body')。在('click',函数(e){
if(e.target.hasAttribute('button-on-popover')){
var action=e.target.getAttribute('my-action');
var目标=$(此);
var updateAvailableTd=e.target.closest('td.updateAvailable');
$.ajax({
url:“某个url”,
数据类型:“json”,
async:false,
成功:功能(数据){
如果(操作==“更新”){
//替换图标
$(updateAvailableTd.html(“”);
}
//DOM中更新的次数较少
var num_updates=parseInt($('num_updates').text();
$('num_updates')。文本(num_updates-1);
}
});
e、 预防默认值();
}否则{
$('[data toggle=“popover”]')。每个(函数(){
如果(!$(this).is(e.target)&&&$(this).has(e.target).length==0&&$('.popover')。has(e.target).length==0){
$(this.popover('hide');
}
});
}
});
$('body').on('click', function (e) {
if (e.target.hasAttribute('button-on-popover')) {
var action = e.target.getAttribute('my-action');
var target = $(this);
var updateAvailableTd = e.target.closest('td.updateAvailable');
$.ajax({
url: 'some url',
dataType: "json",
async: false,
success: function(data){
if (action == 'update'){
// Replace icon
$(updateAvailableTd).html('<span class="glyphicon glyphicon-ok"></span>');
}
// Lower number of updates in DOM
var num_updates = parseInt($('#num_updates').text());
$('#num_updates').text(num_updates - 1);
}
});
e.preventDefault();
} else {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
}
});