Adding new element by clicking Dynamically added button using jQuery

Question

I have a jQuery script for adding dynamic content inside containerDivs. http://jsfiddle.net/Lijo/srFkJ/2/

This div element structure is added in multiple places in the HTML page. Please click First and Second buttons in the fiddle to see this.

The dynamic script adds a button named “View Recipients” to the HTML. When any of the “View Recipients” button is clicked, a new Div element (childHTML in fiddle code) need to be added to the corresponding logRow div (yellow background). How can we do this?

Thanks to @DavidHedlund jsfiddle.net/Lijo/srFkJ/6

LCJ
– LCJ

2012-08-09 10:37:53 +00:00
Commented Aug 9, 2012 at 10:37 — LCJ
– LCJ, Commented Aug 9, 2012 at 10:37

David Hedlund · Accepted Answer · 2012-08-09 10:32:27Z

2

You can add a live listener to the .viewRecipientsButton, which will trigger even for buttons that didn't exist when the listener was added

$('.viewRecipientsButton').live('click', function() {
    $(this).closest('.logRow').append($(childHTML));
});

Demo

Note that live is deprecated these days, but since you're including jQuery 1.4.1 in your document, I suppose this is a requirement.

answered Aug 9, 2012 at 10:32

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LCJ Over a year ago

Thanks. What can I use instead of "live" if I am migrating to a newer version?

David Hedlund Over a year ago

If you're using jQuery 1.7+, you should switch to .on. $(container).on('click', '.viewRecipientsButton', listener); Note that container has to be a container that does exist when the listener is added, and it should preferrably be one as close to the button as possible. From jQuery 1.4.2 to 1.7, use delegate, with almost exactly the same syntax: $(container).delegate('.viewRecipientsButton', 'click', listener);

Collectives™ on Stack Overflow

Adding new element by clicking Dynamically added button using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related