工具提示在 Ajax 内容加载时关闭答案

【问题标题】：Tooltip Close On Ajax Content Load工具提示在 Ajax 内容加载时关闭
【发布时间】：2015-11-10 20:40:22
【问题描述】：

我在使用 jquery 工具提示时遇到问题。我在 DIV 元素上加载了一些内容，当我悬停在此 DIV 中加载的 imagemap 元素时，它应该显示工具提示。效果很好，但是当我单击某些图像地图元素以加载新内容时，工具提示不会破坏。我设法（经过一些研究）使工具提示搜索旧工具提示并销毁旧工具提示，但仅当我调用新工具提示时。

我会展示一些代码。

这个DIV是内容的收据：

<div id="content">
        <script type="text/javascript">$( "#content" ).load( "prefacio.html" );</script>
    </tr>

这个链接调用一个函数来加载一个新的内容：

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();
            });
        });
    }
});

在上述情况下，如果我将鼠标悬停在一个带标题的元素上，我会使用标题的内容调用一个工具提示，但如果我单击此元素以调用新页面的加载，则工具提示会持续存在。

链接是这样的：

<area title="<b>Texte</b>:<br> Test" shape="rect" coords="7,7,109,40" href="#link1" onclick="abrirPag('somepage.html');">

当我调用 $abrirPag 时，我需要一些东西来查看是否有任何工具提示打开，然后关闭，但我在寻找解决方案时有一段时间没有成功。

【问题讨论】：

标签： jquery ajax tooltip

【解决方案1】：

使用

$(document).ajaxComplete(function()

代替

$(document).ready(function(){

【讨论】：

像魅力一样工作...感谢您的帮助。

【解决方案2】：

你需要使用

.ajaxComplete

而不是

.ready

【讨论】：