Add click function to dynamically created html tags

Question

So I have a div that contains a number of other divs. Each of these other divs has a class called record. I only use this class to select all of these divs.

<div id = "resultContainer">
   <div class="record">result1</div>
   <div class="record">result2</div>
   <div class="record">result3</div>
   <div class="record">result4</div>
</div>

I also add a click event=

$(".record").click(function(e) {
        do stuff here....
    });

Now I want to dynamically add another div.

$("#resultContainer").append("<div class='record'>result5>/div>");

But now that click event is not added to the record.

My idea was to create a function called update() that executed the $(".record.... code and call the function each time I added a record. But then the original divs do the action more than once!

How do I get all of my divs, regardless of when they were added, to before the do stuff here... exactly once when clicked?

thanks!

In addition, I also have buttons on the dynamic div. So a solution that was able to handle something lik this: $(".save").button({ icons: { primary: 'ui-icon-disk' }, text: false }); would be preferable.

user113716 · Accepted Answer · 2010-12-21 18:37:52Z

7

Don't use .live() in this case. This is a perfect situation for jQuery's .delegate() method, which is more efficient.

$("#resultContainer").delegate('.record','click',function() {
    // do stuff here...
});

Only clicks inside the resultContainer need to be processed to see if they match .record, where .live() will need to process every click on the page.

answered Dec 21, 2010 at 18:37

user113716

323k64 gold badges454 silver badges441 bronze badges

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

2 Comments

kralco626 Over a year ago

The issue that I did have with this is that I had a lot of events, and the containers that I had to delegate too were too lagre. I had to go back to implementing the events normally and finding a different way to make sure the events were not applied twice. Good for most applications but it was too slow for me.

kralco626 Over a year ago

The problem is that this method does delays the "work" to "runtime" rather than "loadtime". So when I create some new html I would rather spend the time then applying the events to only the tags that it has not been applied to already, rather than spending the time when the user clicks to figure out if an event needs to be fired.

Emmett · Accepted Answer · 2010-12-21 18:28:29Z

4

http://api.jquery.com/live/:

Attach a handler to the event for all elements which match the current selector, now and in the future.

$(".record").live("click", function(e) {
    //do stuff here... 
});

answered Dec 21, 2010 at 18:28

Emmett

14.4k12 gold badges58 silver badges82 bronze badges

8 Comments

kralco626 Over a year ago

whats the cost of doing this however?

Emmett Over a year ago

@kralco One event is attached to document. Check out the docs (api.jquery.com/live) for more info.

kralco626 Over a year ago

is there a way to use this solution in this situation? $(".save").button({ icons: { primary: 'ui-icon-disk' }, text: false });

Emmett Over a year ago

@kralco For button(), check out this answer: stackoverflow.com/questions/3028912/…. Also, if all your records are in resultContainer, patrick dw is right -- use delegate.

kralco626 Over a year ago

@patrick - the difference being that delegate allows for adding the event to only a parent element, rather than the whole document? so something like .delegate(document,'click',function... would be equivilent to .live('click',function...?

|

JJJ · Accepted Answer · 2012-04-19 10:40:31Z

2

As of jQuery 1.7 you should use on() instead of live() or delegate(). From the documentation:

As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

The on() method should be attached to a static parent or document:

$(document).on( 'click', '.record', function(e) {
    // do stuff here....
});

answered Apr 19, 2012 at 10:40

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

Comments

qwertymk · Accepted Answer · 2010-12-21 18:26:28Z

1

Take a look at the jQuery live() function

http://api.jquery.com/live/

You can add an event listener for all div, regardless of changes in the page

answered Dec 21, 2010 at 18:26

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Comments

jLuengas · Accepted Answer · 2010-12-21 18:29:25Z

0

Try live() method. Instead of:

$(".record").click(function(e) {
    do stuff here....
});

Try this:

$(".record").live(function(e) {
    do stuff here....
});

answered Dec 21, 2010 at 18:29

jLuengas

716 bronze badges

Collectives™ on Stack Overflow

Add click function to dynamically created html tags

5 Answers 5

2 Comments

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related