Proper way of binding events with jQuery

Question

I am somewhat new to Javascript but even more green with jQuery. I've already come across something that's got me scratching my head.

What is the difference between:

$('.foo').click(function(){
//blah
});

and

$('.foo').onclick = function(){
//blah
}

I prefer the second way but it doesn't seem to work. Am I doing something wrong?

Thanks in advance.

Answer 1

With $('.foo'), you're interacting with a jquery wrapper object (not an HTML element object), which does not have the onclick property you're trying to use in the second example.

The first example lets jquery marshal how that function is hooked up to the event, especially with applying it to everything with class "foo".

If the syntax is more comfortable, you could:

var myFunction = function() { /* blah */ };
$('.foo').click(myFunction);

Answer 2

You are missing the whole point of jQuery. Your preferred method doesn't work with jQuery because jQuery doesn't operate on single DOM elements. A single DOM element has an onclick property, so if you did something like this it would work:

document.getElementById('bar').onclick = function() { // blah };

However, jQuery is all about sets. For example, in the code you pasted, you are trying to bind something to all elements with a class of foo. When doing stuff like this, you have to play by jQuery's rules (and this is a Good Thing!). A wrapped set, ie, $('.foo') is not the same as directly getting a DOM element like I did above. It will, however, contain an array of all the DOM elements found, which jQuery exposes. So if there was a single element with a class of foo in the document, you could do:

$('.foo')[0].onclick = function() { // blah };

This is, however, not recommended as the whole point of jQuery is to abstract out all this specific Javascript syntax and let jQuery figure things out for you. You should embrace this, as it will make your code much cleaner and portable. As such, you should use the click or the bind functions:

$('.foo').click(function() {
    // will bind something to all elements with a class of foo
});

$('.foo').bind('click', function() {
    // functionally identical to the above, either is fine
});

Answer 3

onclick property can only be attached to DOM elements. $('.foo') is not a DOM element. It is an array-like jQuery object. It can refer to one or more DOM elements.

$('.foo')[0].onclick = function() {}

will work but attaches the event to only the first match.

$('.foo').click(function(){})

attaches the onclick event to all the elements matched. The current element can be referred by this object inside the event handler.

On of the reasons of using jQuery is to avoid non-standard code like the above. Although onclick is supported by all browsers, it is not the standard W3C recommended way of attaching events.

Answer 4

Yes, you are doing something wrong. Here's what:

In jQuery, $ is a function. For simplicity, lets say it is a factory of objects of type "jQuery".

So when you write

var temp = $('.foo');

You are creating an object of type "jQuery", that basically contains a collection of all DOM nodes with class "foo".

Now, each object has its own well-defined set of data members and methods.

click() is a method that takes a function as an arguement. However, an object of type "jQuery" has no member called "onclick". So when you write:

$('.foo').onclick = function(){ //blah }

it does not work.

However, the proper method:

temp.click( function(){ alert("My id is = " + this.id); } );

will work.

Cheers!

jrh.