0

I have written code in javascript the function searchCompany queries the database and adds a list of applicant_original and corresponding buttons to select them. The list and the buttons are created and visible in the UI but the event handler is unable to be attached to the button.

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

The addClick function is not working. No button having id=i logs when clicked.

Harshdeep Kanhai
  • 79
  • 8
  • since you add those element dynamically use event delegation use `.on()` and bind the event on an element hat is static on load [good example to look](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) – guradio Nov 13 '18 at 06:34
  • Possible duplicate of [jQuery .live() vs .on() method for adding a click event after loading dynamic html](https://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht) – Nandita Sharma Nov 13 '18 at 06:37
  • also additional suggestion use class instead of ID to make it easier for you to create the click event use this context to determine the click element. – guradio Nov 13 '18 at 06:40
  • I changed `addClick` to follows – Harshdeep Kanhai Nov 13 '18 at 06:41
  • Possible duplicate of [What is DOM Event delegation?](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) – guradio Nov 13 '18 at 06:41
  • I changed `addClick` to follows ` (function addClick() { $("#search-result").on("click", "button", function () { $(`${event.srcElement.id}`).toggleClass("submitted"); }) })();` Still not working – Harshdeep Kanhai Nov 13 '18 at 06:54
  • console.log is working inside the function but jQuery is not working. – Harshdeep Kanhai Nov 13 '18 at 06:56

1 Answers1

0

You can do it by the following way. 

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

}
J.Jai
  • 597
  • 1
  • 5
  • 9
  • This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? *Explain* your answer, so future visitors of all skill levels can learn from it. [Code-only answers are considered low quality on SO](https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers). – Don't Panic Nov 14 '18 at 15:14