Lidando com eventos em elementos adicionados posteriormente – javascript coffeescript

Considere o seguinte HTML:

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

E o seguinte script:

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

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

Rodem no JSFiddle e confiram: http://jsfiddle.net/dpa8rj8L/

No Botão1 o evento é disparado. No Botão2 não, pois ele foi adicionado depois.

Eu gostaria de saber qual a melhor forma de tornar o evento disponível também para o segundo botão, se possível, sem ter que adicionar o evento “click” novamente.

Quando o elemento não existe no DOM, tem que fazer a delegação do evento no document, ou num elemento mais próximo que englobe os .foo‘s:

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