Handler for dynamic button does not work

One fix, here's the code:

// Клик "добавить" $(".btnProductCreate").click(function () { var rowTemplate = ` <tr> <td style="display:none" class="product_id"></td> <td> <div class="view-row"> <div class="product_title"></div> </div> <div class="update-row"> <input type="text" class="btn-block form-control inputUpdateTitleProduct"> </div> </td> <td class="text-center"> <div class="view-row"> <a class="btn btn-warning btnProductUpdate">Изменить</a> <a class="btn btn-danger btnProductDelete">Удалить</a> </div> <div class="update-row" style="display:none"> <a class="btn btn-success btnProductSave">Сохранить</a> <a class="btn btn-danger btnProductCancel">Отмена</a> </div> </td> </tr> `; data = JSON.stringify({ Title: $("#inputProductTitle").val() }); $.ajax({ type: "POST", url: domen + "Product/Create", data: data, crossDomain: true, contentType: "application/json; charset=utf-8", processData: false, success: function (res) { var $row = $(rowTemplate); $row.find(".product_id").text(res.id); $row.find(".product_title").text(res.title); $("#productTbody").append($row); } }); }); 

as can be seen from the code - a button is added with the text Изменить and the class btnProductUpdate

The problem is that the handler does not work

 // Клик "изменить" $(".btnProductUpdate").on('click', function () { alert(123); let row = $(this).parent().parent().parent(); row.find(".view-row").css("display", "none"); row.find(".update-row").css("display", "block"); }); 

By pressing 123 it is not displayed (although I create a test button in the code and it works by analogy)