what are the differences between on() function and bind() function

Question

on function

$("selector").on("click", function(event){
//code to be executed
});

bind function

$("selector").bind("click", function(event){
//code to be executed
});

When to use on function and bind function especially?

They are exactly the same when used in this manner (but `.on` can do much more than `.bind` when given more arguments). There is no reason to use `.bind` ever. — Jon, Aug 06 '13 at 10:33
http://stackoverflow.com/questions/8065305/whats-the-difference-between-on-and-live-or-bind — nyzm, Aug 06 '13 at 10:40
<> and internally .bind() use .on() so an other reason to prefer using .on() — A. Wolff, Aug 06 '13 at 10:47

Patsy Issa · Answer 1 · 2013-08-06T10:40:00.853

1

From the docs:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

bind only works if the element exists, on will bind it to all elements matching the selector. Docs.

$(document).on("click","selector", function(event){
//code applies to all elements matching the selector.
});

edited Aug 06 '13 at 10:40

answered Aug 06 '13 at 10:31

Patsy Issa

11,113
4
55
74

1

`on will bind it to all elements matching the selector.` only when given a delegate selector parameter. In the OPs case, this is not true. – Rory McCrossan Aug 06 '13 at 10:35
@RoryMcCrossan you are right. – Patsy Issa Aug 06 '13 at 10:38

bipen · Accepted Answer · 2013-08-06T10:48:50.573

both attaches event handlers to a document... bind attaches event handler directly to the elements (which does not delegates).. so binding does not work for dynamically added element where as on does... it uses event delegation.

with the codes you have got.. there is no difference between on and bind here..both does the same thing (attaches click handler to the selected element)

as to When to use on function and bind function especially?

simple answer would be,

if you are using jquery 1.7+ . use on() , if your element is added dynamically use .on().

what are the differences between on() function and bind() function

2 Answers2