工具提示在 Ajax 内容加载时关闭
Tooltip Close On Ajax Content Load
我在使用 jquery 工具提示时遇到问题。
我在 DIV 元素上加载了一些内容,当我悬停在这个 DIV 中加载的图像映射元素时,它应该显示工具提示。
这工作正常,但当我单击某些图像映射元素以加载新内容时,工具提示不会破坏。
我设法(经过一些研究)工具提示搜索旧工具提示并销毁旧工具提示,但只有在我调用新工具提示时才这样做。
我会展示一些代码。
这个DIV是收货内容:
<div id="content">
<script type="text/javascript">$( "#content" ).load( "prefacio.html" );</script>
</tr>
这 link 调用函数加载新内容:
onclick="abrirPag('somepage.html');"
此函数加载新页面:
function abrirPag(valor){
var url = valor;
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("content").innerHTML = "<img src='images/loader.gif'>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("content").innerHTML = xmlRequest.responseText;
$(document).ready(function(){
if (window.location.hash) {
var hash = window.location.hash
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 2000);
}
});
var nav = $('.content-nav');
if (nav.length) {
var contentNav = nav.offset().top;
}
}
最后,这个功能,我真正的问题开始了。
$(document).ready(function(){
$(document).tooltip({
track: true,
content: function () {
return $(this).prop('title');
},
show: null,
open: function(event, ui)
{
if (typeof(event.originalEvent) === 'undefined')
{
return false;
}
var $id = $(ui.tooltip).attr('id');
$('div.ui-tooltip').not('#' + $id).remove();
},
close: function(event, ui)
{
ui.tooltip.hover(function()
{
$(this).stop(true).fadeTo(200, 1);
},
function()
{
$(this).fadeOut('200', function()
{
$(this).remove();
});
});
}
});
在上面的例子中,如果我将鼠标悬停在一个带标题的元素上,我会看到一个名为标题内容的工具提示,但如果我单击该元素以调用新页面的加载,则工具提示会持续存在。
link是这样的:
<area title="<b>Texte</b>:<br> Test" shape="rect" coords="7,7,109,40" href="#link1" onclick="abrirPag('somepage.html');">
我需要一些东西,当我调用 $abrirPag 时,看看是否有任何工具提示打开,然后关闭,但我已经搜索解决方案有一段时间没有成功。
使用
$(document).ajaxComplete(function()
代替
$(document).ready(function(){
您需要使用
.ajaxComplete
而不是
.ready
我在使用 jquery 工具提示时遇到问题。 我在 DIV 元素上加载了一些内容,当我悬停在这个 DIV 中加载的图像映射元素时,它应该显示工具提示。 这工作正常,但当我单击某些图像映射元素以加载新内容时,工具提示不会破坏。 我设法(经过一些研究)工具提示搜索旧工具提示并销毁旧工具提示,但只有在我调用新工具提示时才这样做。
我会展示一些代码。
这个DIV是收货内容:
<div id="content">
<script type="text/javascript">$( "#content" ).load( "prefacio.html" );</script>
</tr>
这 link 调用函数加载新内容:
onclick="abrirPag('somepage.html');"
此函数加载新页面:
function abrirPag(valor){
var url = valor;
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("content").innerHTML = "<img src='images/loader.gif'>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("content").innerHTML = xmlRequest.responseText;
$(document).ready(function(){
if (window.location.hash) {
var hash = window.location.hash
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 2000);
}
});
var nav = $('.content-nav');
if (nav.length) {
var contentNav = nav.offset().top;
}
}
最后,这个功能,我真正的问题开始了。
$(document).ready(function(){
$(document).tooltip({
track: true,
content: function () {
return $(this).prop('title');
},
show: null,
open: function(event, ui)
{
if (typeof(event.originalEvent) === 'undefined')
{
return false;
}
var $id = $(ui.tooltip).attr('id');
$('div.ui-tooltip').not('#' + $id).remove();
},
close: function(event, ui)
{
ui.tooltip.hover(function()
{
$(this).stop(true).fadeTo(200, 1);
},
function()
{
$(this).fadeOut('200', function()
{
$(this).remove();
});
});
}
});
在上面的例子中,如果我将鼠标悬停在一个带标题的元素上,我会看到一个名为标题内容的工具提示,但如果我单击该元素以调用新页面的加载,则工具提示会持续存在。
link是这样的:
<area title="<b>Texte</b>:<br> Test" shape="rect" coords="7,7,109,40" href="#link1" onclick="abrirPag('somepage.html');">
我需要一些东西,当我调用 $abrirPag 时,看看是否有任何工具提示打开,然后关闭,但我已经搜索解决方案有一段时间没有成功。
使用
$(document).ajaxComplete(function()
代替
$(document).ready(function(){
您需要使用
.ajaxComplete
而不是
.ready