Handling events in elements added later

Question

Consider the following HTML:

<div id="div">
    <button class="foo">Botão1</button>
</div>

And the following script:

$(".foo").click ->
    alert "foobar"

$("#div").append '<button class="foo">Botão2</button>'

Rotate on Jsfiddle and check: http://jsfiddle.net/dpa8rj8L/

In Button1 the event is triggered. Not in Button2, because it was added later.

I would like to know how to make the event available also for the second button, if possible, without having to add the event "click" again.

Answer 1

When the element does not exist in the DOM, has to do the delegation of the event on document, or a closer element encompassing .foo's:

$(document).on( 'click', '.foo', function(e){ 
    alert('bar');
});