Не работате .on('change') на добавленный через append input?

Question

[podushka]

Код с добавление записи, в которой есть input:

$('.button_newlesson').click(function(){
                $(function() {
                    var newElems = $("<div class='title' data-id='"+tems_mass_id+"' style='display: flex'></div>")
                    .append('<div class="i0">'+ptp_tema_number+'</div>')
                    .append('<div class="i1" style="width: 45%; padding: 4px 0px;"><input class="input_ptp_tema" type="text"></div>')
                    .append('<div class="i2" style="width: 45%; padding: 4px 0px;"><input class="input_ptp_tema" type="text"></div>')
                    .append('<div class="i6">&nbsp;</div>')
                    .show()
                    $('.table_body').append(newElems);
                });
            })

и код, если input будет изменяться:

$('.input_ptp_tema').on('change', function() {
                alert(123);
            })

но он не работает. В чём проблема??

Comments

[Froggyweb]

https://qna.habr.com/q/25993

[podushka]

Froggyweb, так у меня и так .on

Answer 1

[Сергей Соколов]

Надо «делегировать» — слушать события на общем родителе. Тогда свеже-созданные элементы тоже попадут в обработку – события на них «пузырьком» поднимаются вверх, там-то их и поймают.

$('.table_body').on('change', '.input_ptp_tema', function() {

См. Direct and delegated event handlers в документации к .on()

Comments

[podushka]

Спасибо большое, так долго мучался :)