How do i add jquery .live() to this code

I've got a little (and i mean mini) tooltip plugin that i've created but have run into an issue. Basically, it all works fine if instantiated on the dom ready event. However, if I need (as i do) to bring $ajax data onto the page that changes the dom, then my pluggin no longer (for obvious reasons) works.

I don't quite know where in the plugin i'd add the neccessary code to allow it to function correctly (i've tried attaching the live event onto the hover and mousemove events but with eratic results). I DON'T want to have to to reinitialize the tooltip code everytime the $ajax method is run, as there are quite a few different ones involved in the page. I'd rather some sort of 'live' functionality was able to be attached to the tooltip plugin.

Anyway, the full trace can be found here:

http://www.jsfiddle.net/jimibt/FLSXv/

hope it twigs/rings a bell somewhere...

[update] to re-iterate, adding the live event onto the hover and mousemove events caus开发者_StackOverflow中文版es eratic results in my 'real' example. i'm looking for an alternative to this. thanks...

---

When you apply your tooltip, also add a new class such as hasTooltip. Then, when you complete your AJAX request look for all a elements that do not have the hasTooltip class, but do have the vtip class, applied and run your $.tooltip() function on them.

You can find these new elements like so:

$('a.vtip:not(a.hasTooltip)');

See my update to your example.

---

This is trivial:

$(this).live("hover", function(e) {
        this.t = this.title;
        this.title = "";
        $("body").append("<p id='tooltip'>" + this.t + "</p>");
        $("#tooltip").hide().css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn(1400);
    }, function() {
        this.title = this.t;
        $("#tooltip").fadeOut('fast').remove();
    });
    $(this).live("mousemove", function(e) {
        $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });