Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

jQuery Basics

Well done!

You have completed jQuery Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

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.

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