jQuery - convert .live() to .on()

Question

How do I go about combining this old jQuery code into the v1.7 .on()?

v1.3 .live():

    $('#results tbody tr').live({
    mouseenter:
       function () { $(this).find('.popup').show(); },
    mouseleave:
       function () { $(this).find('.popup').hide(); }
    });

v1.7 .on():

$('#results tbody').on('mouseenter', 'tr', function () {
    $(this).find('.popup').show();
});
$('#results tbody').on('mouseleave', 'tr', function () {
    $(this).find('.popup').hide();
});

I want to pass both event handlers to one .on() call, but keep the brilliant event delegation .on() allows me to do.

Thank you!

Whats' wrong with your second example? You could chain both `on()` calls off one selector, but other than that I see no issues. — Rory McCrossan, May 17 '12 at 13:46
No, there's no issues, I just want to pass both event handlers in one object, like I do in the first example. Thanks for the super quick reply, by the way. — pilau, May 17 '12 at 13:47
TJ. answers the actual question, but Rory is right that in a case like this you could just use a single, dyanmic handler method. — JMM, May 17 '12 at 13:54

score 10 · Accepted Answer · answered May 17 '12 at 13:51

You can pass an event-map as the first parameter:

$('#results tbody').on({
    'mouseenter' : function () {
        $(this).find('.popup').show();
     },
    'mouseleave' : function () {
        $(this).find('.popup').hide();
    }
}, 'tr');

jQuery documentation:

.on( events-map [, selector] [, data] ),
events-map A map in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

score 3 · Answer 2 · answered May 17 '12 at 13:51

3

I just want to pass both event handlers in one object, like I do in the first example.

In this case you could attach the two events together, then differentiate them in the handler itself, like this:

$('#results tbody').on('mouseenter mouseleave', 'tr', function (e) {
    if (e.type == "mouseenter") {
        $(this).find('.popup').show();
    }
    else {
        $(this).find('.popup').hide();
    }
});

answered May 17 '12 at 13:51

Rory McCrossan

306,214
37
269
303

This is nice! I think it would come in handy in cases where you are binding many event handlers on the same element - and you could use a select switch to capture everything. – pilau May 17 '12 at 13:55

zzzzBov · Answer 3 · 2012-05-17T13:59:50.223

1

The formats used are specified in the documentation for live

$(document).on({...events...}, selector, data);

-or-

$(document).on(event, selector, data, callback);

The code for the live function in 1.7+ is now just a pass-through function:

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

edited May 17 '12 at 13:59

answered May 17 '12 at 13:49

zzzzBov

157,699
47
307
349

score 0 · Answer 4 · answered May 17 '12 at 13:52

0

Taking your first example and changing live to on should be all that you need

 $('#results tbody tr').on({
mouseenter:
   function () { $(this).find('.popup').show(); },
mouseleave:
   function () { $(this).find('.popup').hide(); }
})

See: http://api.jquery.com/on/#example-6

answered May 17 '12 at 13:52

Rob Lowe

819
6
10

But then you'll be missing the event delegation. Look at TJ's answer :) – pilau May 17 '12 at 13:57

jQuery - convert .live() to .on()

4 Answers4

Linked

Related