HomeBlogjQuery .live() To The Rescue

jQuery .live() To The Rescue

Published April 7, 2010

Recently, I needed a very basic tooltip plugin to use with jQuery to display some additional descriptive information to the end user.  My only requirement for the tooltip was to allow for some basic css styling.   There are COUNTLESS tooltip plugins for jQuery, but most of them are way too big and contain features that I didn't need (at least for this project).    Since the customer was very concerned about page load times and I was already using a few different plugins, I needed something small and light.

Fortunately, I stumbled upon the following code that, at first, seemed to fit the bill: 

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


$(document).ready(function(){
    tooltip();
});

 

On a basic page, this worked fine.   The problem came when I wanted to use tooltips for dyanmic content loaded onto the page via ajax.   Since the hover and mousemove events were being bound to the page on page-load, new tooltip anchors loaded through ajax were not working.

 

I attempted to call the tooltip function within a $.ready() statement with each new ajax call.  This succesfully bound the events to the new content,  however, the existing tooltip anchors would now trigger multiple events which wreaked havoc on the funtionality.

 

jQuery .live() To The Rescue:

The jQuery .live() even handler was the answer to my problems.  Instead of cycling through the DOM and binding an event handler to each relavent object, .live() binds a special handler to the root of the DOM tree.  This handler is called when a matching event bubbles up through the DOM regalrdless of when the code in question was placed in the DOM tree.

 

I went ahead a changed the tooltip code to use the .live() handler and, BINGO,  everything worked perfectly.   Here is the altered code:

function tooltip(){   
        xOffset = 10;
        yOffset = 20;
    
    $("a.tooltip").live('mouseover',function(e){
        this.t = this.title;
        this.title = "";
        $("body").prepend("<p id='tooltip'>"+ this.t +"</p>");
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")                       
            .fadeIn("fast");
    });
    $("a.tooltip").live('mouseout',function(){
            this.title = this.t;
            $("#tooltip").remove();
    });
    $("a.tooltip").live('mousemove',function(e){
            $("#tooltip")
                    .css("top",(e.pageY - xOffset) + "px")
                    .css("left",(e.pageX + yOffset) + "px");
    });
};

blog comments powered by Disqus

1 COMMENT

Steve

Steve is a senior application developer with nearly a decade of experience in the IT industry. Now specializing in web technologies, Steve worked for many years implementing speech recognition IVR applications for fortune 500 companies.

This article is under Geek Factor, Programming, Web Programming

There is 1 comment for this post

Connect With Us

Send Us a Message

Do you wish to give us feedback on one of our apps, send us a message or explore a proposal? Fill out the form below and we'll get back to you pronto!

Visit Us

250 West Nyack Road, Suite #200 West Nyack, NY 10994
Get Directions

Call Us Toll Free

877-GO-RUSTY
877-467-8789

Telephone

845-369-6869

Fax

845-228-8177