Question

Alright have been working to switch to jQuery 1.7’s new and improved .on() function instead of relying on .live().

Here’s what get’s me, when you’ve got multiple bindings, .live() was great letting you do them all in a simple function. For example:

$('.my_thing').live({
   mouseover: function(e) {
     console.log('hey imma moused over');   
   },
   mouseout: function(e) {
     console.log('hey imma moused out');   
   }
 });

Very simple! How would you do this with .on()? Here’s as close as I can get and it still feels messy.

$(document).on('mouseover','.my_thing', function(e) {
     console.log('hey imma moused over');   
  }).on('mouseout','.my_thing', function(e) {
     console.log('hey imma moused out');   
 });

Feels messy, no? There must be a better way.

PS – This has got to be one of the worst functions EVER if you’re trying to learn more about it on Google.

Answer 1

Just use an events map in addition to a selector:

$(document).on({
    mouseover: function(e) {
        console.log('hey imma moused over');   
    },
    mouseout: function(e) {
        console.log('hey imma moused out');   
    }
}, '.my_thing');

Here’s a demo.