Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Introduction to jQuery Events Using the on() Method

Roudy Antenor
Roudy Antenor
4,124 Points

What's the difference between calling the .click(function) method and using the on('click', function); ?

Hello all - do these two methods do the same thing ? what is the difference between this example :

$('a').click( () => {
  console.log('hey');
});

and this example:

$('a').on('click', () => {
  console.log('hey');
});

4 Answers

Jesus Mendoza
Jesus Mendoza
23,274 Points

The .on('click') method works on dynamically added elements while the .click() method doesnt.

How?

// Works on dynamically added elements with the class .button
$('div').on('click', '.button', function() {
// do something
});

// does not works on dynamically added elements with the class .button
$('.button').click(function() {
// do something
});
Roudy Antenor
Roudy Antenor
4,124 Points

Hello Jesus - I do not fully understand the first code? --When you say 'dynamically added element' can you clarify a little please --as far as the documentation it like where you placed button is more of a filter for the div element. Meaning it will target only .button class that are a descendent of the <div> tag..

Steven Parker
Steven Parker
215,955 Points

This is good information, but it does not answer the question that was asked.

The original question specificaly asked about the two-argument version of the function ("on('click', function)"). That form also does not work on dynamically added elements.

Jesus Mendoza
Jesus Mendoza
23,274 Points

What I mean with dynamically added elements is that sometimes you add elements depending of how the user interacts with your application. For example, you could add a button if the user clicks on another button and that new button should also have a click event handler. The .click() method wont work in the newly added buttons, even if they have the same class or ids defined in your click() method. But if you use the .on('click') method to select the parent element or even the document element and then pass the element that you want to listen for events on $(document).on('click', '.button', function() {}); it will work on newly added elements.

Steven Parker
Steven Parker
215,955 Points

There's no difference between the specific forms you asked about.

Quoting directly from the jQuery documentation for click(handler):

This method is a shortcut for `.on( "click", handler ).

There are also other ways to use the "on" function. One of these is used to establish a delegated handler. In that case, a single handler is established which uses event propagation to handle all the elements, including ones created later. See the jQuery documentation for .on() for more details.

Jacqueline Yeung
Jacqueline Yeung
592 Points

thanks for the explanations! This content should be in the video, the video doesn't do justice to clarifying the use of "on"

Steven Parker
Steven Parker
215,955 Points

Check out the link I provided in my answer for the complete documentation.

Roudy Antenor
Roudy Antenor
4,124 Points

Hello Jesus - I do not fully understand the first code? --When you say 'dynamically added element' can you clarify a little please --as far as the documentation it like where you placed button is more of a filter for the div element. Meaning it will target only .button class that are a descendent of the <div> tag..