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 jQuery Basics Understanding jQuery Events and DOM Traversal Using Events with Dynamically Added Elements

Ruth O'Kelly
Ruth O'Kelly
4,944 Points

Still not understanding the concept.

I am still trying to understand the concept of Event Delegation and Propagation. Why does the button not work in the initial scenario? I would have thought that by the time we click the button, the rest of the JS code has run and therefore the button has been created and is now ready to use?

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,626 Points

Hey Steven , you said ** it tried to attach event handlers when there were no buttons** , I was wondering for how much time it will wait for or search for buttons to be added into the DOM , so that it can attach the event handlers to them.?

Steven Parker
Steven Parker
220,450 Points

There is no waiting. If the code tries to attach an event handler on an element that does not exist, it fails. That's why the order that things are done in is important.

2 Answers

Steven Parker
Steven Parker
220,450 Points

The initial issue is caused by the order of the code. It has all run before you click on the button, but while it was running, it tried to attach event handlers when there were no buttons, and then created the button.

So the button itself is there, but it has no event handler to react to being clicked.

Ruth O'Kelly
Ruth O'Kelly
4,944 Points

Thanks Steven. So event listeners are only attached to elements, if that element is on the page at the time the event listener code is runs? (If that makes sense). If an element has not yet been appended to the page, then all event listener declarations will ignore that element?

Steven Parker
Steven Parker
220,450 Points

The listener doesn't "ignore" the element, one just does not exist on an element that was created later.

You can, however, create listeners with delegated handlers that will respond to elements created later. They are attached to an existing element which will be a parent of the element created later, and they rely on the concept of event propagation (also known as "bubbling").

This concept is covered in some of the more advanced courses (I'm not sure which by name).

Tyler Dix
Tyler Dix
14,230 Points

As I understand this, the difference to really pay attention to is what event you're telling the JS interpreter to listen to. Before, it was:

$('.spoiler button')

And because that button was appended AFTER the event listener, it's basically listening for something that doesn't' exist.

With the change to:

$('.spoiler')

...it's now listening for the spoiler element, which DOES exist. This helped clarify this concept for me.

Joseph Quintiliano
seal-mask
.a{fill-rule:evenodd;}techdegree
Joseph Quintiliano
Front End Web Development Techdegree Student 9,346 Points

so what youre. saying is, because it cant listen to the button, because it was created later within the spoiler element...thus it must listen to the spoiler element to activate the button; assuming the button is a child of the spoiler element node.

am i understanding this correctly