Correct way to bind events to jQuery
I'm a bit new to Javascript, but even greener with jQuery. I've already come across something that made me scratch my head.
What's 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.
You are missing the whole jQuery element. Your preferred method doesn't work with jQuery, because jQuery doesn't work with individual DOM elements. One DOM element has an onclick property, so if you did something like this it will work:
document.getElementById('bar').onclick = function() { // blah };
However, jQuery is all about sets. For example, in the inserted code, you are trying to associate something with all elements with a class foo
. When you do this kind of thing, you have to play by the jQuery rules (which is a good thing!). The wrapped set i.e. $('.foo')
is not the same as getting the DOM element directly like I did above. It will, however, contain an array of all found DOM elements that jQuery provides. Therefore, if the document has one element with a class foo
, you can do:
$('.foo')[0].onclick = function() { // blah };
This is not recommended, however, as the whole point of jQuery is to abstract away all that particular Javascript syntax and let jQuery figure out what you need. You should accept this as it will make your code cleaner and more portable. So you have to use functions click
or bind
:
$('.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
});
a source to share
Since $('.foo')
you are interacting with a jquery wrapper object (not an HTML element) that does not have the property onclick
you are trying to use in the second example.
The first example lets jquery marshal how this function hooks up to an event, especially when applied to everything with the "foo" class.
If the syntax is more convenient, you can:
var myFunction = function() { /* blah */ };
$('.foo').click(myFunction);
a source to share
The onclick property can only bind to DOM elements. $ ('. foo') is not a DOM element. It is a massive jQuery object. It can refer to one or more DOM elements.
$('.foo')[0].onclick = function() {}
will work, but only gives the event the first match.
$('.foo').click(function(){})
attaches an onclick event to all elements being matched. The current element can be passed by an object this
inside an event handler.
Due to the reasons for using jQuery, non-standard code should be avoided as stated above. While onclick is supported by all browsers, it is not the standard W3C recommended way to add events.
a source to share
Yes, you are doing something wrong. That's what:
In jQuery, the $ function is a function. For the sake of simplicity, let's assume this is a jQuery object factory.
So when you write
var temp = $('.foo');
You create an object of type "jQuery" which basically contains a collection of all DOM nodes with class "foo".
Each object now has its own well-defined set of data members and methods.
click () is a method that takes a function as an argument. However, an object of type "jQuery" does not have a member called "onclick". So when you write:
$('.foo').onclick = function(){ //blah }
he does not work.
However, the correct method is:
temp.click( function(){ alert("My id is = " + this.id); } );
will work.
Hooray!
JRH.
a source to share