1

Criei esse código bem simples para exemplificar minha duvida:
Aqui tenho uma tabela html com algumas linhas, cada linha possui um acionador que a remove via jQuery.
No tfoot da tabela existe um acionador que insere via jQuery uma nova linha dentro da tabela, essa nova é criada contendo um acionador para remove-la.
O problema: O acionador de remoção da nova linha não funciona.

$(function() {
	$('span.close').on({
    click: function() {
      $('tr#color-'+$(this).data('ref')).remove();
    }
  });
  $('span.plus').on({
    click: function() {
      var trs = $('table.devcolors tbody tr');
      var ct = trs.length + 1;
      var line = '<tr id=color-'+ct+'> <th>Cor 0'+ct+'</th><td><span class=close data-ref='+ct+'>X</span></td></tr>';
      $('.devcolors tbody').append(line);
    }
  });
})
table {width:100%;}
td {text-align:center;}
.close, .plus {cursor:pointer;}
.close:hover {color:red;}
.plus:hover {color:green;}
th, td {border-bottom:solid 1px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table class="devcolors">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Remover</th>
    </tr>
  </thead>
  <tbody>
    <tr id="color-1">
      <th>Cor 01</th>
      <td><span class="close" data-ref="1">X</span></td>
    </tr>
    <tr id="color-2">
      <th>Cor 02</th>
      <td><span class="close" data-ref="2">X</span></td>
    </tr>
    <tr id="color-3">
      <th>Cor 03</th>
      <td><span class="close" data-ref="3">X</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>
        <span class="plus">+</span>
      </th>
    </tr>
  </tfoot>
</table>

3
  • Leigmar, acredito que seja por um motivo simples: ao carregar a página, a função "on.click" é ligada internamente aos nós, sendo que quando acrescenta novos nós, a função não fica atribuída a eles. Tente extrair, só pra teste, a função colocando o atributo "onClick" no Html chamando a função para excluir. 5/06/2020 às 13:03
  • Utilize $('table').on('click', 'span.close', /* função */). Desta forma, toda vez que o usuário clicar na tabela, o jQuery vai, automaticamente, verificar se foi em algum span.close. Uma alternativa é utilizar a propriedade onclick. 5/06/2020 às 13:06
  • @ValdeirPsr Obrigado, adaptei a sintaxe para sua sugestão e funcionou. Valeu mesmo! 5/06/2020 às 13:15

1 Resposta 1

0

Para os novos elementos criados dinamicamente, o event listener não está sendo aplicado, visto que nesta implementação ele está escutando apenas os elementos já criados (Cor 01, Cor 02, Cor 03).

Substitua o $('span.close').on({}) por algo como:

$(document).on('click', 'span.close', function(){
    $('tr#color-'+$(this).data('ref')).remove();
});

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .