cluetip does not work for first click on live elements after ajax success

Question

On live elements after ajax success, below code from cluetip is not working for first click only otherwise it works smoothly. What will be the issue for first click?

  $('a.load-local').live('click', function(event) {
     $('a.load-local').cluetip({
        width: 'auto',
        activation: 'click',
        local:true,
        sticky: true,
        arrows: true,
        positionBy:'bottomTop',
       cursor: 'pointer',
       closePosition: 'top',
       closeText: '<img src="images/close1.jpg" alt="close" width="16" height="16"         
        style="position:absolute; right:5px; top:0px;" />'
    });
    event.preventDefault();
  });

Answer 1

I don't really know cluetip, but is it possible the first click is actually initialising cluetip for the clicked element, and then it works normally? (even though you'd be re-intialising it with every click)

A quick look at their demo page http://plugins.learningjquery.com/cluetip/demo/ suggests the cluetip method does initialise, not invoke.

Answer 2

In your code, the cluetip is getting initialized everytime you click the anchor - a.load-local. In my opinion only the below code is needed, which you can add in $('document').ready()

 $('a.load-local').cluetip({
        width: 'auto',
        activation: 'click',
        local:true,
        sticky: true,
        arrows: true,
        positionBy:'bottomTop',
       cursor: 'pointer',
       closePosition: 'top',
       closeText: '<img src="images/close1.jpg" alt="close" width="16" height="16"
       style="position:absolute; right:5px; top:0px;" />'
    });