Question

我已经用JavaScript编写了代码，功能searchCompany查询数据库并添加applicant_original列表和相应的按钮以选择它们。列表和按钮已创建并在UI中可见，但是事件处理程序无法附加到按钮。

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");
       })
     })
  })()  

}

将点击添加到jquery中创建的动态ajax按钮不起作用

1 个答案: