Add click function on dynamically generated html tags

Question

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

<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 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 the click event is not added to the record.

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

How do I get all my divs, no matter when they were added, up to do stuff here...exactly once upon click?

thank!

, div. , , -, : $(".save").button({ icons: { primary: 'ui-icon-disk' }, text: false }); .

Answer 1

.live() . jQuery .delegate() method, .

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

resultContainer , , .record, .live() .

Answer 2

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

, , .

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

Answer 3

jQuery 1.7 on() live() delegate(). :

jQuery 1.7, .on() , .

on() document:

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

Answer 4

jQuery live()

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

div,

Answer 5

live(). :

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

:

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