Tooltip Close On Ajax Content Load

Question

I having a issue while working with jquery tooltip. I have some content loaded on a DIV element, and it's suposed to show a tooltip while i'm hover a imagemap element, loaded in this DIV. That work fine, but when i click in some of the image map elements to load a new content, the tooltip don't destroy. I managed to make (after some research) the tooltip search for a old tooltip and destroy the old one, but only when i call a new tooltip.

I will show some of the code.

This DIV it's the receipt of the content:

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

This link call a function to load a new content:

onclick="abrirPag('somepage.html');"

This function load the new page:

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

And for the last, this function, where my real problem begin.

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

In the case above, if i mouseover a titled element i have a tooltip called with the content of title, but if i click in this element to call the load of a new page, the tooltip persist.

The link is something like this:

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

I need something, to, when I call the $abrirPag, to see if have any tooltip open, and close the, but I have searching for solutions have some time without sucess.

Answer 1

Use

$(document).ajaxComplete(function()

in place of

$(document).ready(function(){