• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jQuery: How to append elements into the DOM to have correct functionality

 
Alexandra Pierce
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hi everyone,

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).

HTML





// buttons click events




// handlers
 
Rob Crowther
author
Ranch Hand
Posts: 297
5
Android Fedora Firefox Browser
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Either use a on() with a delegated event handler, or use live() if you're using a version of jQuery older than 1.7.
 
Alexandra Pierce
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Would you mind sharing the syntax of using .on() within my code snippets? I'm still learning as you can probably see by my novice looking code! Thanks!
 
Rob Crowther
author
Ranch Hand
Posts: 297
5
Android Fedora Firefox Browser
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Alexandra Pierce
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

I understand and am continually using and learning more javascript. I'm no John Resig and my brain is a little mixed up over this. 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. I'll keep at it, thanks for the links.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Rob Crowther
author
Ranch Hand
Posts: 297
5
Android Fedora Firefox Browser
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:


Here is a quick jsFiddle which, using those examples, does a simplified version of what you're attempting.

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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic