Adicionar e remover linha em tabela com jQuery

Front-end
#1

Pessoal, escrevi esse código simples para adicionar e remover linhas. As linhas são adicionadas somente a partir do primeiro link, os demais que foram adicionados dinamicamente não funcionam. Alguém sabe o que está errado nesse código?

[code]

Adicionar linha 
<script>
  $(document).ready(function(){
    $('a.add').on('click', function(){
      var row = "<tr><td>Nova coluna</td><td><a href='#' class='add'>Add</a></td><td><a href='#' class='remove'>Remove</a></td></tr>"
      $(this).closest('table').append(row);
    });
    $('a.remove').on('click', function(){
      $(this).closest('tr').remove();
    });
  });
</script>
Coluna Add Remove
[/code]
#2

Caras, eu tinha pesquisado bastante e não tinha achado. Logo após eu postar aqui, continuei buscando mais um pouco e achei o erro!

Eu substitui a linha:$('a.add').on('click', function(){por$(document).on('click', 'a.add', function(){
E a linha:$('a.remove').on('click', function(){por$(document).on('click', 'a.remove', function(){

Parece que o “on” não funciona para elementos adicionados dinamicamente, por isso tem que usar o “document” e especificar o elemento dentro do “on”.
Bom, acho que isso. Se alguém tiver uma explicação mais detalhada do porquê isso acontece, posta aí! :wink:

#3

Isso acontece porque o evento em javascript só funciona para elementos que o javascript já “sabe” que existam.
Por exemplo, eu tenho um botão com a class = ‘botaoclicavel’

Se eu fizer um evento do tipo:
$(’.botaoclicavel’).click(function(){
// faz qualquer coisa
});

Este evento irá monitorar os elementos com a classe “botaoclicavel”, e quando o evento ocorrer, ou seja, o usuário clicar no botão. O método será executado.

Acontece que se eu adicionar um outro botão dinamicamente após o carregamento deste javascript, esse javascript não irá conhecer este novo botão, e o evento não irá funcionar.

Quando isso acontece comigo, geralmente eu separo o evento em um método, e sempre chamo este método depois do elemento novo ser criado.
Mas se a solução do amigo aí acima funcionar, acredito que fique bem melhor do que a maneira que eu faço.

Valeu.

#4

qdo eu preciso usar jquery em conteudo carregado dinamicamente eu faço assim :

var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “…/…/js/jquery.js”;
document.getElementsByTagName(‘head’)[0].appendChild(script);

Insiro esse código dentro da função que será executada ao clicar m algum botão ou link.
Isso faz com que o jquery seja carregado novamente ao dom e assim o conteúdo carregado dinamicamente é reconhecido.

#5

[quote]Parece que o “on” não funciona para elementos adicionados dinamicamente, por isso tem que usar o “document” e especificar o elemento dentro do “on”.
Bom, acho que isso. Se alguém tiver uma explicação mais detalhada do porquê isso acontece, posta aí! [/quote]

É que antigamente tínhamos:
[list] a função “click” e a função “bind” que registravam eventos diretamente sobre elementos pre-existentes.[/list]
[list] a função “live” e a função “delegate” que registravam eventos diretamente sobre elementos pre-existentes e futuros.[/list]

Após a versão 1.7 senão me engano, introduziram a função “on” e a recomendação para usa-la.

equivale a usar:

Por outro lado

equivale a usar o delegate

Uma dica: tente não usar o “on” com document como em:

Isso faz o jquery checar até a raíz do documento do DOM, diminuindo assim a performance. :slight_smile:
Se puder tente fazer como abaixo.

abs!

#6