Question

I am using this code to make title = ""‘s look better.

this.vtip = function () {
    this.xOffset = -10;
    this.yOffset = 10;
    $(".vtip").unbind().hover(function (a) {
        this.t = this.title;
        this.title = "";
        this.top = (a.pageY + yOffset);
        this.left = (a.pageX + xOffset);
        $("body").append('<p id="vtip">' + this.t + "</p>");
        $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("slow")
    }, function () {
        this.title = this.t;
        $("p#vtip").fadeOut("slow").remove()
    }).mousemove(function (a) {
        this.top = (a.pageY + yOffset);
        this.left = (a.pageX + xOffset);
        $("p#vtip").css("top", this.top + "px").css("left", this.left + "px")
    })
};
jQuery(document).ready(function (a) {
    vtip()
});

However, after I have made a post request on a page this function doesn’t make the title = ""‘s look better, they just look default.

My question really is, how can I make the above code work on content after it has been dynamically loaded onto the page?

Answer 1

Events bound to elements will only be bound to elements that exist at the time you run the code. Any new elements loaded through your ajax didn’t exist when your function runs on page load.

You have 2 choices.

1. Rebind the events every time you load new elements that include vtip class. This would be a simple call to vtip() in your ajax success callback.
2. Rewrite your code utilizing a delegation method for events. Depending on jQuery version thes jQuery methods would be on(), delegate() or live()