jquery qtip on dynamically added elements

Question

I'm messing around with the jquery "qtip" tooltip plugin and i'm trying to add the qtip functionality to elements that are dynamically added to my webpage(via ajax) but can't figure out how. I think i need to use "live" in my jquery somewhere but don't know where.

Any help would be great.

Heres a jsfiddle with my dilemma. You'll notice the qtip works great on the three existing links but if you click "Add Link" then hover over the created link, there is no tooltip even though it has the "qtip" css class.

The javascript box contains a function to add a link to a box dynamically, the qtip plugin, then my custom code that creates the qtip with all elements with the "qtip" css class at the end.

the following is my jquery ajax code. I don't know how to reapply the qtips to the new elements with the qtip class.

function ajaxunitCalendar(X,Y,Z){

    $('#ajaxdiv').fadeOut(300,loadcontent); 

    function loadcontent()
    {
        var changecal = "<?php echo base_url();?>calendar/unit/" + X + "/" + Y + "/" + Z + " #ajax_calendar_wrap";
        $("#ajaxdiv").load(changecal,'',function(){
        $('#ajaxdiv').fadeIn(300); 

            return false; 
        });

        return false;
    }

        return false;   
};

Answer 1

Whoops, completely misread that...too late at night :P

This is what you need: http://jsfiddle.net/navgarcha/888ap/3/

Just apply the qtip() plugin to all the elements you create.