.on(events ,selector ,data ,$)

Description: Attach the jQuery chain behind to one or more events.
events – string
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
selector – string, optional
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
data – object, optional
A map of data that will be passed to the event handler.
$ – the jQuery token, optional
Use $ instead of a handler or leave it out.

Tip: Many other methods that internally call .on() and pass the handler function will automatically support that timing, too:
.click($), .dblclick($), .mousedown($), .mouseup($), .mousemove($), .keydown($), etc…

Usage pattern

$('.some').on('click').doSome().jQueryStuff();
 
$('.some').on('click',$).doSome().jQueryStuff();
 
$('.some').click($).doSome().jQueryStuff();

Other versions of on(…)

See also usage of bind(…)

See also usage of delegate(…)

See also usage of live(…)

See also usage of one(…)

Examples with timed version of .on()

Example #3: a simple inline click handler

The handler-less version of .on() allows to create small event handlers very easily. In this example the span element is shifted right with each button click. 

$('button').on('click').next().css({left:'+=20px'});
⇒

Watch me moving!

Example #4: blinking a given number of times on click

We repeat .toggleClass() for an even number of times, so the class "blink" is absent again when the repeat loop finishes.

Remark that the click handler is assigned directly in the invocation chain using .click($). 

$('.example button').click($).siblings('span')
   .repeat(200).toggleClass('blink').until(4);
⇒

That text blinks two times after clicking .

Example #10: fading submenus with user friendly timeouts

Menu navigation is frustrating when the submenu closes immediately on mouseleave, because sometimes the mouse pointer moves few pixels unintended. That's why we want to build in timeouts on mouseenter and mouseleave to show/hide the corresponding submenu.

With jquery-timing this is just two lines: 

$('#menu li')
  .mouseenter($).unwait().wait(200).children('ul').fadeIn()
  ._.mouseleave($).unwait().wait(300).children('ul').fadeOut();​
⇒
​

Example #13: quick image selection

In this example the user can choose an image by clicking on it. He can change his choice as often as he wants.

The "ready" button will always disable if last image is unselected. 

$("#choices").on('click','img')
    .add('.selected').toggleClass('selected')
    .$('#result').attr('disabled',false)
._.on('click','img.selected')
    .$('#result').attr('disabled',true);
​
⇒
Choose your preferred image:
​
  • Spaghetti Bolognese
  • Spaghetti Carbonara
  • Tortellini
  • Shrimps
  • Cake
  • Sweets
  • Coffee

Example #18: falling little boxes

This example first creates 25 little boxes with an inline definition: 
$('#boxparent').repeat().append('<div>').until(25)
  .children().hide();

These 25 boxes shall be animated as falling down with each button click.

A helper function is necessary to animate them in reverse order: 
$.fn.reverse = function() {
  return this.$(this.get().reverse());
}

Try clicking on that button multiple times during animation. With .stop(true,true) and .unwait() all animations are reset at the beginning. 

$('button').on('click').fadeTo('slow',0.3)
  .$('#boxparent div').stop(true,true).unwait()
  .css({top:-300}).show().reverse()
  .each($).animate({top:0},500).wait(100).all()
  .wait(500).fadeOut('slow')
  .$('button').wait(200).fadeTo('slow',1);
⇒
​