FAQ: jQuery Setup - Event Handlers

This community-built FAQ covers the “Event Handlers” exercise from the lesson “jQuery Setup”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to jQuery

FAQs on the exercise Event Handlers

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I am curious why the following code does not satisfy step 1 of exercise 9 concerning jQuery:

$(document).ready(() => {
  const $menuButton = $('.menu-button');
  const $navDropdown = $('#nav-dropdown');
	$menuButton.on('click', function() {
    
  });
});

And yet this will suffice as an answer:

$(document).ready(() => {
  const $menuButton = $('.menu-button');
  const $navDropdown = $('#nav-dropdown');
	$menuButton.on('click', () => {
    
  });
});

Is there something special about arrow-syntax anonymous functions that I am missing?

Not likely. It may be that was the choice of the author to give us an opportunity to see it at work in a callback. Of all the new features introduced in ES6, arrow functions take a strong lead in the developer community, followed up no doubt by template literals.