How JQuery .on() method can work like .bind(), .live() and .delegate() methods?

Question

I am new to JQuery and learning it. I found that the JQuery .on() method can be used in place of .bind(), .live() and .delegate() methods. I would like to know how it can work like all the three mentioned methods and what are the pros/cons of doing so?

jQuery is open source. Look at the source to know how it works. — Denys Séguret, Jan 04 '14 at 11:19
go through the source code of the method... it should be easy to understand — Arun P Johny, Jan 04 '14 at 11:19

score 1 · Accepted Answer · answered Jan 04 '14 at 11:20

See below example

// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

For Reference

http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

score 0 · Answer 2 · answered Jan 04 '14 at 11:22

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). (Quote from jQuery .on page.)

score -1 · Answer 3 · answered Jan 04 '14 at 11:19

-1

The mainly pros is on() work in dynamic elements (instead of live()).

How JQuery .on() method can work like .bind(), .live() and .delegate() methods?

3 Answers3