Well done!

You have completed jQuery Basics!

Preview

Using Events with Dynamically Added Elements

4:41 with Treasure Porth

Learn about event delegation and how it can be used to add event listeners to dynamically added DOM elements.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

The on() method addresses a common problem that can occur when dynamically creating 0:00

elements. 0:04

When the code base of a website gets larger and more and 0:05

more people work on it, you can't always guarantee the order in which elements get 0:09

added to the page and when the event listeners are added to the page. 0:13

Go ahead and open up the workspace with this video now and 0:16

I'll show you what I mean. 0:19

I'll change this method back to click. 0:20

And I'll move this event listener code above where we append the button to 0:28

the page. 0:32

Save and preview, click on the button, and it doesn't work, nothing happens. 0:34

Why isn't the button being hidden? 0:41

Looking at this first line of code, 0:44

we're selecting all the spoiler buttons on the page and applying the event 0:46

handler to show the span containing the spoiler text and hiding the button. 0:50

But at this point in the script, we haven't created the button and 0:55

appended the button to the page yet. 0:58

We do that here. 1:01

So up here, we're saying add this event listener to this button element. 1:03

But the button doesn't yet exist. 1:08

This is a problem you may find yourself running into a lot 1:11

when dynamically adding elements to a page. 1:13

Say we wanted to add a feature to our spoiler revealer that allows the user to 1:16

add new spoilers, that's where you'd run into a problem. 1:20

Any buttons you add to the page after it's already loaded won't automatically 1:25

have a click event attached, so they won't work. 1:28

That's where event delegation and the on() method come in. 1:32

Event delegation means you're listening for 1:36

an event on the parent element instead of on the child element. 1:38

So in our project, instead of listening for a click event, on the button itself 1:42

which we're dynamically adding here, we'll listen for a click event on the button's 1:48

parent element which is the paragraph tag with the class of spoiler. 1:52

Because we're listening for 1:57

an event on the parent element, it doesn't matter whether the descendants 1:58

exist in the DOM at the time of the page load, or are dynamically added later. 2:02

This is called event propagation. 2:07

When an event moves through the DOM from a child to a parent element, that's called 2:09

event propagation because the event propagates, or moves through the DOM. 2:14

In this example, an event from a button gets passed to the parent paragraph. 2:18

Here's what that looks like in code. 2:24

I'll comment out this code for now. 2:28

And first, we select the parent element which is spoiler. 2:31

Then we use the on() method. 2:37

Remember, the first argument of the on() method is the event or 2:39

events we're listening for. 2:43

So click, mouse over, blur, mouse out, etc. 2:45

In this case, we're listening for a click. 2:49

Then we give it, as a second argument, a selector for 2:53

the actual element we want to listen for the click on. 2:56

For our selector, we can just use the element name, button. 3:00

Then we can add our click handler. 3:04

Let me make sure you understand what this is saying. 3:09

Basically, we're saying here, if the user clicks the spoiler element, 3:12

or any of the elements nested within the spoiler element, 3:17

start paying attention because we may want you to do something. 3:20

Secondly, we're saying, if the user clicks anywhere inside the spoiler, 3:24

in that particular thing, it was clicked on was an element called button. 3:29

Then fire this function, run this code. 3:33

Let's copy and paste our code into this new listener and delete the old one. 3:37

So let's save and preview, and the button works again. 3:57

Now, it doesn't matter when the button is created because we're listening for 4:03

this event on the button's parent element which is already on the page. 4:06

Event delegation comes in very handy when adding interactivity to dynamically added 4:11

elements. 4:16

Or when you're not in full control of when elements are added. 4:18

If you're finding event delegation a bit difficult to understand, that's okay. 4:21

It can be a little hard to grasp until you run into the problem in your own code. 4:26

So just remember, if you're ever using JavaScript to create and 4:30

add new elements to a page and find that your event listeners aren't firing, 4:34

look up event delegation and the on() method. 4:38

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

jQuery Basics

Well done!

You have completed jQuery Basics!

Using Events with Dynamically Added Elements

Further Reading

Related Discussions

Related Discussions