O manipulador de events não está funcionando no conteúdo dynamic

Eu tenho uma tag A na qual, quando clicada, ela anexa outra tag B para executar uma ação B ao clicar. Então, quando clico na tag B, a ação B é executada. No entanto, o método .on não parece estar funcionando na marca B.

Meu html e jquery para tag A é como abaixo:

 Add Shipping address $('.add_address').click(function(){ //Add another  $(document).append('Update'); }) 

Quando a tag B é clicada, alguma ação B é executada. Minha jquery é como abaixo:

 $('.update').on('click',function(){ //action B }); 

Eu tenho algum conteúdo não dynamic que tem class “.update” também. No método .on() acima funciona bem para o conteúdo não dynamic, mas não para o conteúdo dynamic.

Como posso fazer funcionar para conteúdo dynamic?

Você precisa adicionar o parâmetro selector, caso contrário, o evento será ligado diretamente em vez de delegado, o que só funcionará se o elemento já existir (portanto, não funciona para conteúdo carregado dinamicamente).

Veja http://api.jquery.com/on/#direct-and-delegated-events

Mude seu código para

 $(document.body).on('click', '.update' ,function(){ 

O conjunto jQuery recebe o evento, em seguida, o delega a elementos que correspondem ao seletor fornecido como argumento. Isso significa que, ao contrário do uso live , os elementos do conjunto jQuery devem existir quando você executar o código.

Como esta resposta recebe muita atenção, aqui estão dois conselhos complementares:

1) Quando for possível, tente vincular o ouvinte de evento ao elemento mais preciso, para evitar manipulação de evento inútil.

Isto é, se você está adicionando um elemento da class b a um elemento existente de id a , então não use

 $(document.body).on('click', '#a .b', function(){ 

mas use

 $('#a').on('click', '.b', function(){ 

2) Tenha cuidado, quando você adicionar um elemento com um id, para garantir que você não está adicionando-o duas vezes. Não é apenas “ilegal” em HTML ter dois elementos com o mesmo id, mas quebra muitas coisas. Por exemplo, um seletor "#c" recuperaria apenas um elemento com esse id.

Você está faltando o seletor na function .on :

 .on(eventType, selector, function) 

Este seletor é muito importante!

http://api.jquery.com/on/

Se o novo HTML estiver sendo injetado na página, selecione os elementos e anexe os manipuladores de events depois que o novo HTML for colocado na página. Ou use events delegates para append um manipulador de events

Veja jQuery 1.9 .Live () não é uma function para mais detalhes.