Jquery Qtip2 cannot destroy it

Question

While using the qtip2 library I have this code:

HTML:

<div id="test">Test</div>
<br />
<a id="create">Create</a><br />
<a id="destroy">Destroy</a>

Javascript:

$('#create').click(function() {
    $('#test').qtip({content:'test',show: {delay: 0,ready: true,effect: false},hide: false});
});

$('#destroy').click(function() {
   $('#test').qtip('destroy'); 
});

If we click on "create" then on "destroy" it work fine, the qtip appears and get destroy. But if we click twice on "create" then on "destroy", the qtip will not get destroy.

Here a jsfiddle to test it: http://jsfiddle.net/7QmZj/

Anyone have an idea why? Thank you.

Answer 1

Check for the existed of the qtip before you create another, something like this before your create:

if ($("#test").data("qtip")) return;

Answer 2

Will there be multiple Qtips on the page for different element ? if not, I have a solution that will remove all qtips from the page, if you double click on Create more than once.

    $('#destroy').click(function() 
      {
         $("div[id^=qtip-]").qtip('destroy'); 
      });

Just replace your "destroy" bit with mines, Let me know if this works.