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>
$('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 algumspan.close
. Uma alternativa é utilizar a propriedadeonclick
.