jQuery cluetip('destroy') does not destroy/remove cluetip?

Question

I'm trying to make sense of how cluetip actually works. I have a dummy DOM structure which I did some alerts on to check if the cluetip has been removed after the cluetip('destroy') was called on the anchor element. However, the cluetip div still appears to be alive and well. This really confuses me...

Correct me if I'm wrong... AFAIK, cluetip has 1 instance in the webpage, and it exists in a hierarchy of tags, i.e. cluetip > cluetip-outer > cluetip-inner. It appends itself somewhere to the DOM structure when it is first appended to a html element (in my case, an anchor).

So the question: would calling cluetip('destroy') on the html element actually remove the cluetip, or would it remove/reset some sort of variable in the cluetip (and if so, which variable)? Or am I totally off the track here?

Thanks.

Answer 1

It looks like all the destroy function does is remove the event trigger (lines 28-30)

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

If you want to ensure the data in the cluetip is gone, then clear it yourself:

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

---

Update: To answer your question about seeing if an element has anything bound to it, I'll refer you to something I found from James Padolsey's site:

// 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: the console is referring to the Firebug console.

Answer 2

Try the following:

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

The remove() function should also unbind the events.