File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes jQuery:  How to append elements into the DOM to have correct functionality Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery:  How to append elements into the DOM to have correct functionality" Watch "jQuery:  How to append elements into the DOM to have correct functionality" New topic
Author

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

Alexandra Pierce
Greenhorn

Joined: Jan 25, 2013
Posts: 3
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

Joined: Nov 06, 2012
Posts: 295
    
    5

Either use a on() with a delegated event handler, or use live() if you're using a version of jQuery older than 1.7.


Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
Alexandra Pierce
Greenhorn

Joined: Jan 25, 2013
Posts: 3
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

Joined: Nov 06, 2012
Posts: 295
    
    5

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

Joined: Jan 25, 2013
Posts: 3
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

Joined: Jan 10, 2002
Posts: 61202
    
  66

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?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

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.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: jQuery: How to append elements into the DOM to have correct functionality