2.6 Bind...Live...Delegate...Huh?

[SOUND] Before we continue on to the next set of lessons, I think it's important to clarify what a handful of methods are that you will absolutely see if you're reading tutorials. And those methods will be bind, live and delegate. So we need to figure out what are those and why aren't we really using them in this course. If we take a look at this sample project, you can see that I have an h2 here. And what we're going to do is when the user clicks on it, I want to duplicate it or clone it. So I'll give you one example of how we might do that. And in the process, we'll take a look at using the bind, live and delegate methods. So let's say, get that h2 tag, wrap it in jQuery and when it is clicked, we are going to clone it. So we know that there's a handful of ways. I've tried to drill into you the process of using the .on method and click. However, there's also a shorthand method which is .click. But again, it's important to remember that click behind the scenes is simply pointing to the on method. If we take a look at the jQuery source again, you can see that jQuery will iterate over all of these helpers, blur and focus and focus out and click. For each one of those, what jQuery does is that it handles the event binding. So take a look right here. Return arguments.length is greater than 0, then call the this.on method. So .click or .blur, those are simply shorthands for referencing the on method. Now especially for older tutorials, you will see the Bind methods. Something like this h2.bind click. And this is how we did it originally, when jQuery was first released. You would find some elements and you find an event handler and do something with that. Now technically, there's nothing really wrong with this. But you provably shouldn't use this in your projects anymore. And the reason is, as you'll find shortly, all of these, bind, life and delegate, all of them as of this point as of jQuery 1.7 are the pointers to the on method. So right now, if you're using 1.7. If you call that bind behind the scenes, it's still calling .on. Now the basic idea is the same though, get the elements and when they're clicked, then we're going to run a function. And in this case, we will simply log clicked. If we view this in Chrome, I will open up the Developer Tools by pressing Shift+Cmd+C on my Mac. I will click on heading and sure enough, it does work. Now if we want to update to the click shorthand, we could say .click and then pass a call back function. Try it one more time, refresh, click, that's going to work as well. Because both of those are pointing to the same method. Now here's where it get's a little bit tricky though. When you're calling and I'm going to backtrack a few steps. When you're calling bind, you are attaching an event handler to every single element in this rep set. So if we have five heading to tags, we're attaching five event handlers. Refresh. Click on it we're getting the same thing. And as we learned in events 2.01, I believe that can be a little costly when you're attaching the same handler over and over. And then also, once you're updating the DOM when you do this, those updated elements will not receive the event handlers that we attached. For example, after we log this to the console, let's clone the element. And we can clone it by referencing the heading that was clicked by using this wrapped in the jQuery object and we will clone it. This is a new method. We're going to take that element and clone it. Now for now, if we save that to a variable called clone and we log that to the console. Refresh. Click on it. You'll see that that element has been duplicated. So all we wanna do here is clone that element and throw it into the DOM. So let's backtrack just a couple steps. This .clone .appendTo, this is a relatively new method, I've covered it slightly. But we're saying take the contents of this and we're going to append it to whatever. You could append it to the container div or in this case, we're going to append it to body. Or alternatively, you could reference document.body. At this point, it doesn't really matter though. All right and let's try that. Click on it, I'm gonna click on the element. And sure enough, we have added a new h2 to the DOM. Very cool. But now watch what happens if I click on that next one. Nope, that's not responding at all. And the reason is, and this is something that trips people up a lot, so pay attention. You're thinking at this point, well, it worked first and then I added an element and now that new element won't respond to this event handler. And of course, it won't if you think about it in terms of top to bottom. We started by getting all the h2s and we bound a click event handler to them. But then when the user clicks on one, we clone it and throw it into the DOM. But that newly created element that was thrown into the DOM hasn't received any event handlers, so it's not going to respond naturally. Now there's a couple ways to deal with this. First, when you call the clone method, you can actually specify whether you want the event handlers that are attached to the element to be cloned, as well. That will default to false, like so and that means I don't care if there's any click event, handler or hover. Don't worry about it, just clone the element itself and throw it into the body element. However, if we set that to true, we're saying, nope, I want you to retain those event handlers. Let's come back, refresh. I'm gonna click on this one and if I close this out, you'll see that we can do this indefinitely and that's using the clone method. However, that's not what I wanna focus on. Let's take a look at a different way. Rather than using bind, shortly after that, a method called live was introduced. Live and its companion dye. Now the difference to this is live implements event delegation. So rather than attaching many, many event handlers to all of the elements in the wrap set. Live will attach one event handler to the document. So when we say h2 live, we're essentially saying, get the document and we're going to attach a click handler and then we're going to detect whether the element that was clicked was an h2. Let's try that now. And I'm going to remove true to make sure that the event handler will still work when we add new elements to the DOM. Refresh. Click on it and you'll see that that is still working. And that's because we're not attaching an event handler specifically to the h2, we're attaching it to the document. So when we add more after the fact, it doesn't matter because the event handler is part of the document not the h2. Now live was a good method. At this point, it's been deprecated as of jQuery 1.7. So you don't really wanna use this at all. But again, you're going to see this in tutorials, especially ones that came out a couple years ago. But again, think about it. We are grabbing all of the h2 elements from the DOM, wrapping them in jQuery. And then we're calling the, the live method, but that simply attaches the event handler to the document and then detects whether the target was an h2 tag. So we're not really doing much with that selector, it's a little bit wasteful. Now if you wanted to specify that live should not use the document as its context, you could also pass a second parameter to the jQuery function. And you could say, h2 and let's wrap this within a div with a class of container. And then we could say, get h2 and we're going to use the div with a class of container as its context. And I don't want you to worry about this too much, because again, you shouldn't be using the live method in your projects. Now after that in a future release of jQuery, the delegate method was introduced delegate. Delegate and undelegate. And this is fairly similar, we're starting to move toward the ond method. Now the only difference is what you pass to jQuery should be the context. So in this case, I would say, go get the div with a class of container and then I'm going to listen for when the h2 is clicked. Now let's try this one out, but you're gonna find that it doesn't work like you think. Come back, refresh, I will click on one. But if I click on the next one, like so. It's not going to work. And this is what you need to remember, the delegate method isn't some magical thing that will update the DOM all of the time, it's based on the context. So here, our context is div with a class of container. But then we clone the element and append it to the body, so that won't be apart of container. So I'm going to update this to container, like so. One more time, click on it and now we're getting that same effect using the delegate method. And also, if you need to unbind you would do undelegate. So this was a good choice. We used delegate for a long time and it worked really well. It fixed some of the chaining issues that we had when working with the live method. But at this point, they are all pointers to the on method. And I wanna show you something, if we come to the jQuery source and we're going to take a look at jQuery 1.6.4 and I want you to take a look at the delegate and the undelegate. Now, a nice way to find methods that you want to learn is simply search for the method name followed by colon. So if I want to research, for example, the trigger method, I simply search for trigger colon and that will bring up that method. It'll work most of the time. Now I want you to take a look at the way delegate works. When the user calls delegate, behind the scenes, it was simply pointing to the live method. However, once 1.7 came out, the on method was introduced and everything was streamlined. I'm gonna switch over to jQuery 1.7.1 and I'm going to search for delegate. And now you can see, they're all pointing to the on method .bind. When you call it, you still can. But it's simply a shortcut for using the on method, which will mold itself to fit the way the old API works. The same this with live when you call the live method behind the scenes, jQuery this context that's going to use the document or whatever it's provided. So for example, when we call div.container. If we don't pass the context, it will use the document. Or if we do pass a context and that would be maybe a wrap element, that will be used as it's context and then it calls the on method. So you see that, it's simply mimicking the way it used to work. If we call dye, same thing, it's calling the off method. If we take a look at delegate, the exact same thing again. It's mimicking that API. So the take away is when you're reading tutorials or watching older videos. If they use bind or live or delegate, that's okay. Because with the current code, they're all pointing to the on method. But for your projects and all future projects, don't worry about using a live for delegate. Just stick with the on method, because that's what's being called behind the scenes. So you might as well save yourself a method call.