This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

Through its various versions, jQuery has provided a range of different ways of attaching event handlers to the dom.

From jQuery version 1.7 onwards, the preferred method of attaching an event handler is .on() http://api.jquery.com/on/, and its companion methods .one() and .off().

.on() is a very flexible method because it covers all the capabilities of .live() and .bind() in a single method. .live() is deprecated in version jQuery 1.7 and has now been removed in jQuery 1.9, so when coding or maintaining any jQuery now, using the .on() method is a move that will save developers maintenance grief in the future.

In its simplest form, .on() can attach an event handler directly to a dom element:

$('a.my_button').on('click',function(){});

This is the equivalent of either of:

$('a.my_button').bind('click',function(){});

or

$('a.my_button').click(function(){});

The shortcut .click() method now actually translates to .on() and is currently not scheduled to become deprecated.

Things get a bit more complicated when attaching a handler to a fixed or dynamic group of dom elements. These are what .bind() and .live() respectively have been used for in the past.

With .on() you have to select a context that contains all the elements to look for events on. So to attach to links of class 'any_button' in an area of a dialog, you select a close container of all such links:

$('#overall_container_of_buttons_in_dialog').on('click','a.any_button',function(){});

Within the handler, the context of 'this' will be that of the a.any_button that was clicked.

For a fixed group of dom elements this will be the equivalent of:

$('a.any_button').bind('click',function(){});

For a dynamic group of dom elements this will be the equivalent of:

$('a.any_button').live('click',function(){});

Nevertheless, in both cases it is better to use .on().

Why .on() is best

The .live() and .bind() methods in the example above actually execute as the equivalent of:

$('body').on('click','a.any_button',function(){});

This looks at an entire document to find the applicable dom elements. It is inefficient for .bind() when attaching, and very inefficient for .live() whenever an event occurs, hence why .live() will soon become deprecated.

By using .on(), the container dom element within which the handler catches events is significantly narrowed down. This improves the efficiency of handling events and makes .on() suitable for handling the higher rates of events that many JavaScript dominated web applications now use. So .on() is both considerably more efficient than .live(), while also being more flexible than .bind() because it handles dynamic groups of dom elements within the selected container.

$('#overall_container_of_buttons_in_dialog').on('click','a.any_button',function(){});

When converting code from .live(), an easy mistake to make is to select the context of the link rather than a container that can then be searched for the context. This can work with static dom elements, so is a valid replacement of .bind(), but will fail to handle events from dynamically added elements as .live() would be used for in the past.

$('a.any_button').live('click',function(){});

Does not convert to:

// **Can fail**
$('a.my_buttons').on('click',function(){});

To repeat, the way to use .on() is:

$('#overall_container_of_buttons_in_dialog').on('click','a.any_button',function(){});

Read more How-tos by JohntheFish

Loading Conversation