Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Roudy Antenor
4,124 PointsWhat'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
23,288 PointsThe .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
});
Steven Parker
229,732 PointsThere'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
592 Pointsthanks for the explanations! This content should be in the video, the video doesn't do justice to clarifying the use of "on"
Steven Parker
229,732 PointsCheck out the link I provided in my answer for the complete documentation.
Roudy Antenor
4,124 PointsHello 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..
Roudy Antenor
4,124 PointsRoudy Antenor
4,124 PointsHello 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
229,732 PointsSteven Parker
229,732 PointsThis 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
23,288 PointsJesus Mendoza
23,288 PointsWhat 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.