Why use jQuery on() instead of click()

Because you might have a dynamically generated elements (for example coming from an AJAX call), you might want to have the same click handler that was previously bound to the same element selector, you then “delegate” the click event using on() with selector argument

To demonstrate:

http://jsfiddle.net/AJRw3/

on() can also be synonymous with click() if you don’t have a selector specified:

$('.elementClass').click(function() { // code 
});

is synonymous with

$('.elementClass').on('click', function() { // code
});

In the sense that it only add the handler one time to all elements with class elementClass. If you have a new elementClass coming from, for example $('<div class="elementClass" />'), the handler won’t be bound on that new element, you need to do:

$('#container').on('click', '.elementClass', function() { // code
});

Assuming #container is .elementClass‘s ancestor