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

JavaScript jQuery Basics Understanding jQuery Events and DOM Traversal What is Traversal?

Posted by Ali Rasheed
Ali Rasheed
7,180 Points

what (button) is exactly referring to ?

after creating the <button> tag with js and storing it in a var. then we are adding an event listener to the parent tag of <button> by using on() method. my Q is what is the word 'button' after the click event is exactly referring to within our code, is it referring to the new <button> tag? , or to the var of $button which holds the syntax of the new <button> tag? , or it is referring to any button exists inside the selected parent ?

const $button = $('<button>reveal spoiler</button>');
$('.spoiler').append($button);

$('.spoiler span').hide();
$('.spoiler').on('click', 'button', (event) => {
    console.log(event.target);
    $(event.target).prev().show(); 
    $(event.target).hide();

 });

2 Answers

Harriet Ryder
Harriet Ryder
16,885 Points
Harriet Ryder
Harriet Ryder
16,885 Points

Yeah according to the jQuery documentation the string 'button' could be any CSS selector so you could use '.myParticularButton' for a button with a specific class.

Ali Rasheed
Ali Rasheed
7,180 Points

cool , thanks bro .

Harriet Ryder
Harriet Ryder
16,885 Points
Harriet Ryder
Harriet Ryder
16,885 Points

The string 'button' that is passed into the 'on' method refers to which of the descendants of the .spoiler element should trigger the click. It is optional - you could just have code like this, in which any elements inside the .spoiler element would be clickable:

$('.spoiler').on('click', (event) => {
    console.log(event.target);
    $(event.target).prev().show(); 
    $(event.target).hide();

 });

But with the 'button' string in there it's saying ONLY listen for clicks on a button element that is a descendant of .spoiler

Harriet Ryder
Harriet Ryder
16,885 Points
Harriet Ryder
Harriet Ryder
16,885 Points

And yes like you suggest, it could be ANY button that's inside .spoiler. It doesn't necessarily have to be the one you just added :)

Ali Rasheed
Ali Rasheed
7,180 Points

i just figured that out , it refers to any button that could exist , but is the order of code will still important if we go more specific with event.target by choosing a class name for a specific button if we have more than one button inside the selected parent .