CODEWITHSUNDEEP
jqueryevent-delegation
Ben
Ben

Reputation: 3025

event delegation with jQuery 1.3.2

I'm stuck using jQuery 1.3.2 at the moment and I'm just beginning to understand event delegation in general. But I can't seem to get any sort of event delegation to work on this code. I have a ul with a class 'chat' which when hovering over one of it's li's should create a new span which then slides out, then slides back in when the mouse leaves the li.

This code works, but I want to use event delegation:

$('ul.chat li').hover(
    function() {
        $(this).append($('<span class="join">Join Conversation</span>'));
        setTimeout(function() {
            $('.join').animate({'width': '150px'}, 400);
        },500);
    },
    function() {
        $('.join').animate({'width': '0px'}, 200, function(){
            $(this).remove();                                             
        }); 
    }
);

Can someone show me how to achieve the same result, but with event delegation? Thanks.

Upvotes: 1

Views: 1187

Answers (1)

Jeff Rupert
Jeff Rupert

Reputation: 4840

UPDATE: Doesn't seem like you want event delegation for added items, but more because you'll be working with a very large result set.

A quick search on Google ('event delegation jquery 1.3.2') came up with this.

You can get "event delegation" with the jQuery.live() event.

You'll have to split that into two bindings, like so:

$('ul.chat li').live('mouseover',
    function() {
        $(this).append($('<span class="join">Join Conversation</span>'));
        setTimeout(function() {
            $('.join').animate({'width': '150px'}, 400);
        },500);
    }
).live('mouseout',
    function() {
        $('.join').animate({'width': '0px'}, 200, function(){
            $(this).remove();                                             
        }); 
    }
);

Upvotes: 1

Related Questions