JQuery cluetip ('destroy') doesn't kill / delete cluetip?

Question

I am trying to understand how cluetip really works. I have a dummy DOM structure in which I made some warnings to check if cluetip was removed after cluetip ("destroy") was called in the binding element. However, the cluetip div still seems vibrant and healthy. It really bothers me ...

Correct me if I am wrong ... AFAIK, cluetip has 1 instance on the web page and exists in the tag hierarchy, i.e. cluetip> cluetip-outer> cluetip-inner. It adds itself somewhere to the DOM structure when it is first added to the html element (in my case, to the anchor).

So the question is: will cluetip ('destroy') invoke the html element to actually remove cluetip or delete / reset some variable in cluetip (and if so, which variable)? Or am I completely out of here?

Thank.

Answer 1

It seems that the entire destroy function is deleting the event trigger (lines 28-30)

if (js == 'destroy') {
  return this.unbind('.cluetip');
}

If you want the data in cluetip not to disappear, clear it first:

$('#cluetip-inner').empty();

---

Update. To answer the question of whether there is an element associated with it, I will give you something that I found from James Padolsey's website :

// List bound events:
console.dir( jQuery('#elem').data('events') );

// Log ALL handlers for ALL events:
jQuery.each($('#elem').data('events'), function(i, event){
    jQuery.each(event, function(i, handler){
        console.log( handler.toString() );
    });
});

* Note: consolerefers to the Firebug console.

Answer 2

Try the following:

$(this).cluetip('destroy'); 
$(this).remove(); 

The remove () function should also cancel events.