Witam, mam na stronie tabelkę:
<div class="row">
<div class="col-sm-12">
<table class="table" id="tabela">
<thead>
<tr>
<th>Tytul</th>
<th>ilosc</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="tytul" value="" class="form-control" /></td>
<td><input type="number" name="ilosc" value="1" min="1" class="form-control" /></td>
<td><button class="btn btn-danger deleteRecord"><span class="glyphicon glyphicon-minus"></span></button></td>
</tr>
</tbody>
</table>
</div>
</div>
Button "Add" dodaje dynamicznie wiersz w tabeli taki sam jak ten który jest już wpisany na sztywno, wygląda to tak:
$("#addRecord").click(function () {
var row = '<tr>'+
'<td><input type="text" name="tytul" value="" class="form-control" /></td>'+
'<td><input type="number" name="ilosc" value="1" min="1" class="form-control" /></td>'+
'<td><button class="btn btn-danger deleteRecord"><span class="glyphicon glyphicon-minus"></span></button></td>'+
'</tr>';
$('#tabela').find('tbody').append(row);
});
Tutaj wszystko działa. Jednak jak można zauważyć na końcu każdego wiersza generuje button który docelowo ma usuwać dany wiersz, póki co jednak nie chce w żadnej sposób reagować na wiersze generowane dynamicznie, jest to dziwne bo sama funkcja działa w przypadku gdy klikam button "deleteRecord" w wierszy wygenerowanym statycznie. Wygląda to tak:
$('.deleteRecord').on('click', null, function () {
alert('ALERT!!!!');
});
Opcja z zdarzeniem .click() też nic więcej nie wnosi. Konsola w żadnym przypadku nie wyrzuca błędów. Może ktoś powiedzieć mi dlaczego tak się dzieje?
#tabela
.