How to on click an element added to the html from the same javascript?

Question

I have retrieved some rows from the database by ajax request and added to my HTML page. I want to delete a record using ajax but it doesn't work.

$(document).ready(() => {
  $.getJSON("/admin/getMakes", data => {
    $.each(data, (i, makes) => {
      $("ul#makes").append(
        '<li class="list-group-item">' +
          makes.makeName +
          ' <a href="#",id="deleteMake",data-id=' +
          makes._id +
          '><i class="fa fa-trash" ></i></a>' +
          "</li>"
      );
    });
  });


  $("#deleteMake").on("click", function(e) {
    alert("clicked");
    // var id = $(this).attr("data-id");
    // $.ajax({
    //   type: "DELETE",
    //   url: "/admin/deletemake" + id,
    //   success: function(response) {
    //     $(this).hide();
    //     //window.location.href = "/admin/deletemake";
    //   },
    //   error: function(err) {
    //     console.log(err);
    //   }
    // });
  });
});

I have added an alert to check if it works but it doesn't work so the mistake isn't in the request.

id must be unique , `href="#",id="deleteMake",data-id=` - typo here ? — Evgeniy, Mar 11 '19 at 13:22
I think commas aren't allowed for sepparating props in HTML, either — macl, Mar 11 '19 at 13:23
https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Mar 11 '19 at 13:25
Instead of IDs use classes and you need event delegation. Possible duplicate: https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements — Dan Orlovsky, Mar 11 '19 at 13:25

score 2 · Answer 1 · answered Mar 11 '19 at 13:28

The first mistake - id must be unique. The second is incorrect event delegation. The third - typo in href="#",id="deleteMake",data-id

Lets fix them all :)

Fix typos and use class

$("ul#makes").append(
  '<li class="list-group-item">' 
    + makes.makeName +
    '<a href="#" class="deleteMake" data-id=' + makes._id + '>' +
      '<i class="fa fa-trash" ></i>' +
    '</a>' +
  '</li>'
);

Fix delegation issue

$("#makes").on('click' '.deleteMake', function(e) {
  alert("clicked");
})

Dinu · Accepted Answer · 2019-03-11T14:08:50.303

1) <a href="#",id="deleteMake", - there should be no commas in a HTML tag. Replace commas with spaces.

2) To set the handler in-place, instead of in a subsequent block:

.append(
    $('<li class="list-group-item"></li>')
        .append(
            $('<a href="#"></a>')
                .on('click',function(e){
                    alert(makes._id);
                    // You don't actually want the browser scrolling to #
                    e.preventDefault();
                })
                .append('<i class="fa fa-trash" ></i>')
        )
)

If you leave the code your style, then you can attach the event like this:

    $("ul#makes")
        .append(
            $(
                '<li class="list-group-item">' +
                    makes.makeName +
                    ' <a href="#" id="deleteMake">d</a>' +
                "</li>"
            )
            .on('click','#deleteMake',function(
                alert(makes._id);
                // You don't actually want the browser scrolling to #
                e.preventDefault();
            )
        );

In your code, the events are also attached before content is generated, because the XHR result callback is certain to occur after the main thread finishes execution. That problem doesn't happen with any of the above code. If you MUST set handlers before content is generated, use .on() delegation:

$("ul#makes").on("click", "#deleteMake", function(e){
    alert($(this).data('id'));
    // You don't actually want the browser scrolling to #
    e.preventDefault();
});

thank you, I've tried all these three and it works for the alert, but when I add the delete request back it causes another error, so I have to deal with it too — Hama Saadwn, Mar 11 '19 at 14:15

How to on click an element added to the html from the same javascript?

2 Answers2