Exact difference between bind and click in jQuery?

Question

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            //$(this).clone().appendTo('div');
            $(this).clone().prependTo('div');
        })

        $('button').bind('click', function(){
            $(this).clone().appendTo('div');
        })
    });
</script>
</head>
<body>
    <h1> My WebSite</h1>
    <div>
        <button data-file="day">Day</button>
        <button data-file="night">Night</button>
    </div>
</body>
</html>

I don't see any difference between these two when i run the code as it clones the element to my div tag. What's so special with the bind method?

http://api.jquery.com/category/events/

I was looking at the docs, correct me if i am wrong... if the click and bind does the same thing, why they have two different ways to achieve the same?.

The **exact** difference is that one has five letters and the other has four, and there's two completely different names for the methods. Internally they are exactly the same. — adeneo, Aug 17 '13 at 16:52
read this http://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-trigger-and-on — Arun Raj, Aug 17 '13 at 16:58

score 2 · Answer 1 · answered Aug 17 '13 at 16:51

2

Your example is running the exact same code - click is a shortcut handler. Note that on is now the preferred method of attaching events over bind.

The most common reason for using on (and in previous versions, bind) is it allows you to hook up custom events:

$('.foo').trigger('someEvent.myPlugin');

// in another file, far far away
$('.foo').on('someEvent', function() {
    // deal with someEvent on foo
});

Most commonly you can just use the click, change etc utilities.

answered Aug 17 '13 at 16:51

Rory McCrossan

331,213
40
305
339

Can i use on('bind', function(){}) something like this... – theJava Aug 17 '13 at 16:57
To what purpose? If you're looking to catch the binding of an event as an event, then no. – Rory McCrossan Aug 17 '13 at 17:03

score 1 · Answer 2 · answered Aug 17 '13 at 16:51

1

There is no difference between them

jQuery has provided some utility functions like click(), change() etc to register handlers for common events, they internally uses functions like bind() and on() - new versions

answered Aug 17 '13 at 16:51

Arun P Johny

384,651
66
527
531

score 1 · Accepted Answer · edited May 23 '14 at 07:55

Bind is the general purpose, lower level function. Click is a shortcut method and is a higher level implementation of Bind. Also bind is more or less deprecated you should be using the "on" binding. i.e.

$('selector'.on("click", function () {

});

Th reason to use the "on" binding is that you ave the option of leveraging event delegation. in that you can also do this

$('ul'.on("click", "li", function () {
   //do something whenever one of the list items is clicked
});

one reason for doing this is that you dont have to bind an event to each list item element. Instead you can attach one event to the parent. Suppose you had 200 list items if you used click

$('li'.on("click", function () {
   //thing to do on click
});

each element would have its own listener and that would be inefficient. but by targeting the ul wrapper parent and listening for the event to bubble up you only have to attach to one element. That is more efficient. Look up event propagation or event bubbling on the internet. A simple explanation is that when an event occurs in the DOM that event is propagated to the parents. So if you click a li the ul will also receive the event as will any other divs that wrap the ul and the body and all the way to the window.

Thanks for the nice explanation, one thing which is not getting into my head is [Bind means attaching an event to a element right?] — theJava, Aug 17 '13 at 17:05
and on method can do what [live, bind and delegate] were doing previously?. — theJava, Aug 17 '13 at 17:06

Exact difference between bind and click in jQuery?

3 Answers3