Добавление клика в jquery динамически создаваемые кнопки ajax не работает

Question

Я написал код в javascript, функция searchCompany запрашивает базу данных и добавляет список applicant_original и соответствующие кнопки для их выбора. Список и кнопки создаются и отображаются в пользовательском интерфейсе, но обработчик событий не может быть прикреплен к кнопке.

function searchCompany() {
    $("#search-result").html('');
    let res = [];
    let name = $("#company_name").val();
    $.ajax({
        url: `http://localhost:5000/manualharmonization/query?name=${name}`,
        success: function (data) {
            data.map((el, i) => {
                $("#search-result")
                    .append(`<tr class="list-item"><td>${el.applicant_original}</td>
                    <td class="elem-button"><button class="button" id="${i}"type="button">Select</button></td>
                    </tr>`);


            });
        },
        error: function (e) {
            console.log(e);
            alert(JSON.stringify(e));
        }
    });



}

$("#search-company").click(searchCompany);

(function addClick() {
    $("tr").map(i => {
        $(`#i`).click(function () {
            console.log("clicked");
        })
    })
})();

Функция addClick не работает. Нет кнопки с id=i журналами при нажатии.

Answer 1

Вы можете сделать это следующим образом.

function searchCompany() {
$("#search-result").html('');
let res = [];
let name = $("#company_name").val();
$.ajax({
    url: `http://localhost:5000/manualharmonization/query?name=${name}`,
    success: function (data) {
        data.map((el, i) => {
            $("#search-result")
                .append(`<tr class="list-item"><td>${el.applicant_original}</td>
                <td class="elem-button"><button class="button" id="${i}"type="button">Select</button></td>
                </tr>`);
    SuccessEvents();  // Add events to this functions


        })
    }
    error: function (e) {
        console.log(e);
        alert(JSON.stringify(e));
    }
})
}
$("#search-company").click(searchCompany);

function SuccessEvents(){               

  (function addClick() {
    $("tr").map(i => {
       $(`#i`).click(function () {
          console.log("clicked");
       })
     })
  })()  

}