jQuery the difference between bind, live, delegate, on

The jQuery library lets you register events using the following methods: bind, live, delegate, on. Do you know when and where to use them? Do you know the difference between them?

If you don’t yet, we suggest reading this article.

BIND

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Attach a handler to an event for the elements.
.bind( eventType [, eventData ], handler(eventObject) )
.bind( eventType [, eventData ], preventBubble )
.bind( events )

// ----------------------------------------------
// Exemplo:

jQuery('#botao').bind('click' function() {
    // faz alguma coisa...
});

Registers events on the elements selected by the jQuery library. It only allows registration on elements initially present in the DOM, meaning that if you create elements using javascript, ajax.. bind won’t work.

See what the official jQuery documentation says about bind.

LIVE

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// Attach an event handler for all elements which match
// the current selector, now and in the future.

.live( events, handler(eventObject) )
.live( events, data, handler(eventObject) )
.live( events )

// ----------------------------------------------
// Exemplo:

jQuery('#botao').live('click' function() {
    // faz alguma coisa...
});

Registers events on the elements selected by the jQuery library, unlike bind (mentioned above), live lets you register events for elements that will be loaded through ajax or javascript. The downside of this approach is performance, this method is deprecated and its use is not recommended by the documentation.

See what the official jQuery documentation says about live.

DELEGATE

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// Attach a handler to one or more events for all elements
// that match the selector, now or in the future, based on
// a specific set of root elements.

.delegate( selector, eventType, handler(eventObject) )
.delegate( selector, eventType, eventData, handler(eventObject) )
.delegate( selector, events )

// ----------------------------------------------
// Exemplo:

jQuery('#botao').delegate('a', 'click' function() {
    // faz alguma coisa...
});

The delegate method is similar to live (mentioned above), because elements created after the page loads also respond to events. The difference is that it doesn’t use document as the root element, you choose the root element yourself, matching it with the selector. So this method’s performance advantage is clear.

See what the official jQuery documentation says about delegate.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// Attach an event handler function for one or more
// events to the selected elements.

.on( events [, selector ] [, data ], handler(eventObject) )
.on( events [, selector ] [, data ] )

// ----------------------------------------------
// Exemplo:

// Estilo bind
jQuery('#botao').on('click' function() {
    // faz alguma coisa...
});

// Estilo delegate
jQuery('#botao').on('a', 'click' function() {
    // faz alguma coisa...
});

If you use a jQuery version higher than 1.7, you should always use the on method (it was introduced to replace all the other functions), for earlier versions the use of bind and delegate is recommended, as we’ve just seen.

See what the official jQuery documentation says about on.

That’s it folks, if you have any questions about using these methods or anything to add, leave a comment, we’ll be happy to reply.

REFERENCES

Official jQuery Documentation

jQuery the difference between bind, live, delegate, on

Read this article in