I have a span a label, an text input field and two buttons ( "pause" & "remove") originally in the DOM. On the click of a radio button (class=email-notify), a new set of those elements (I'll call "newEmailSpan") are injected into the DOM via buildAddNewNotification(). I have event handlers defined for the two buttons.
Problem is, when I click either of the buttons in a newEmailSpan, ALL the spans are selected and fire the events (original span as well). I don't want that to happen. I want to be able to select one and manipulate each newEmailSpan individually without effecting any of the others (i.e. turn pause on/off, turn remove/off).
How is this done? I've written the buildAddNewNotification() reusing functions, but I don't fully understand closures even though that is what I will need to use (I'm guessing).
There's example code in the documentation I linked to. If you're struggling, start off with a simple example and work your way up.
Joined: Jan 25, 2013
I'm not understanding exactly where to put the .on() in these code blocks. I've tried various statements, but I'm not getting the results I'm looking for. The jQuery API was the first place I looked before coming here. I've provided all my code that I wrote, so it's not like I'm asking anyone to write the entire code for me, just give me a bit of help by revising my code I've written so I can see how it is done. My code is not completely wrong as it does add the elements and has the functionality for the click events I want. I just don't know how to isolate them from each other.
Alexandra Pierce wrote:I wanted to know how to isolate the newly added elements from the returning matched set, so that when I click on the button in one newly added set, none of the others will handle the click event all at once, but separately.
This where my head starts hurting. I really don't know what you are trying to say or do here. Could you take some time to explain it a tad more clearly?
Alexandra Pierce wrote:so that when I click on the button in one newly added set, none of the others will handle the click event all at once, but separately
Your description of what is happening is confusing, this may be because you don't understand how it all works so I'll attempt to give a short overview:
Elements don't handle events, though event handlers can be attached to elements. Elements fire events, those events then bubble up the DOM tree (there's also capture, but don't worry about that now, most people don't bother with it). If the event bubbles past an element with a handler for that event, the handler will be invoked.
If you want to handle click events on several buttons then you can either add a handler to each individual button, or you can a single handler to a parent element. The first approach has the advantage that you always know exactly which button was clicked, because the handler is directly attached to the button. It has the disadvantage that you have to remember to attach the handler to any new buttons you add. The second approach has the advantage that it will work for any descendent elements, no matter when they're added, without having to be explicitly attached to those elements. The disadvantage is that your handler will have to work out what the context is from the event.target.
So, here's an example of on which uses the first approach:
And here's an example which uses the second approach:
The main difference to your code is here, note how event.target is used to work out which span to do stuff to:
Compare this with your equivalent method:
Note that $(".notify-by-email") (for example) will always select all elements on that page that have a class notify-by-email, it is not magically scoped to the area on the page where the event occurred, you have to do that yourself.
subject: jQuery: How to append elements into the DOM to have correct functionality