2

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.

1 Resposta 1

4

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');
});
3
  • 1
    Funcionou. Versão atualizada do JSFiddle pra quem quiser conferir: jsfiddle.net/dpa8rj8L/7
    – user7261
    11/09/2014 às 13:07
  • 1
    Só pra complementar a resposta, isso é a delegação de eventos no jQuery. 11/09/2014 às 13:32
  • Valeu, @Danguilherme, atualizei a resposta com o link, perfecto :)
    – brasofilo
    11/09/2014 às 13:39

Você deve fazer log-in para responder a esta pergunta.