Dynamicznie generowane elementy nie reagują na zdarzenia

Dynamicznie generowane elementy nie reagują na zdarzenia
krystianknowak
  • Rejestracja:ponad 7 lat
  • Ostatnio:ponad 5 lat
  • Postów:50
0

Witam, mam na stronie tabelkę:

Kopiuj
<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:

Kopiuj
$("#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:

Kopiuj
$('.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?

stivens
  • Rejestracja:ponad 8 lat
  • Ostatnio:21 minut
1
Kopiuj
$('body').on('click', '.deleteRecord', function() {
		//tak bedzie dzialac dynamicznie
});

λλλ
edytowany 1x, ostatnio: stivens
Patryk27
Btw, w tym wypadku lepiej (wydajniej) będzie przypiąć selektor na #tabela.
krystianknowak
  • Rejestracja:ponad 7 lat
  • Ostatnio:ponad 5 lat
  • Postów:50
0

Działa, dziękuje

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.