views:

178

answers:

2

How do I do the live event (for when new content is injected) with the new way of doing multiple jQuery events:

$('.foo', this).bind({
    click: function() {
        //do thing
    },
    mouseover: function() {
        //do other thing
    },
    mouseout: function() {
        //do other other thing
    },
    focus: function() {
        //do other other other thing
    }
}); 

For example in the above I need any content to be bound with the click and all the other events too.

Basically, I'm trying to avoid writing:

$('.foo', this).live('click', function() {
     //do thing
  }
});
$('.foo', this).live('mouseover', function() {
    //do other thing
  }
});
$('.foo', this).live('mouseout', function() {
    //do other other thing
  }
});
$('.foo', this).live('focus', function() {
    //do other other other thing
  }
});
+4  A: 

.........

$('.fastlook', this).live('click', function() {
    // more code.......
  }
}); 

Edit:

If you want to assign multiple events, just separate them with space, eg:

$("selector").live('click mousemove mousedown', function(){
  // more code.............
});

..........

eventTypeA string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.

Source: http://api.jquery.com/live/

Sarfraz
This isn't quite what I was looking for, my fault, I've edited the question to make it clearer.
Smickie
@Smickie: i have updated my answer after having a look at your updated question, see the Edit part in my answer, thanks :)
Sarfraz
+3  A: 

If you want each event to do unique stuff, you're going to have a verbose task on your hands. If you needed each event to do the same thing, this would be a much shorter task. You can bind multiple events, but it's still going to be somewhat verbose:

$('.foo', this).live('mouseover mouseout', function(e) {
  if (e.type == 'mouseover') {
    // do something on mouseover
  } else
  if (e.type == 'mouseout') {
    // do something on mouseout
  }
});

And again, if they all did the same thing, this would be simpler:

$('.foo', this).live('mouseover mouseout', function(){
  // do something on both events
});

Documentation: http://api.jquery.com/live/

Jonathan Sampson