Adding jquery event on dynamically appended element in ajax

Question

Currently I have static html table in bootstrap 4 modal window. When page opens, I fill the table with some data that I have retrieved with ajax get call from server.

• On success I am wrapping my data in <td> and <tr> tag and appending whole structure to my <tbody> of the table. Now, one of the things I have added to my table is some <a> link. I want to refer somehow to that element. More precisely, I am trying to create some event handler but unsuccessfully, it doesn't work

• Here are some snippets from code, first is event handler in jQuery, second is my function which retrieves data and builds my tbody content dynamically.

I tried to google this case but without luck, hope someone can help.

$("#deleteLink").on(click, function() {
    var idVersionNote = this.attr("data-note-id");
    deleteVersionNote(idVersionNote);
});

function getNotes(idVersion) {
  var url = /*[[@{/notes/getNotes/}]]*/ '';
  url += idVersion;
  $.ajax({
    url: url,
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
      /*console.log(data);*/
      var append_data = '';
      $.each(data, function(index, value) {
        /*console.log(value);*/
        append_data += '<tr>';
        append_data += '<td>' + value.user.loginUser+ '</td>';
        append_data += '<td>' + value.versionNote.tstampCreation+ '</td>';
        append_data += '<td>' + value.versionNote.tstamp + '</td>';
        append_data += '<td>' + value.versionNote.note + '</td>';
        append_data += '<td><a href="#" id="deleteLink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'
        append_data += '</tr>';
      });
      $(".notesTable tbody").append(append_data);
    },
    error: function(d) {
      /*console.log("error");*/
      alert("Error");
    }
  });
}

Answer 1

You cannot have the same id for more than one elements. Also, the event handler doesn't work because the link elements do not exist when it is created. Use something like this which attaches the event handler to links inside tbody even if they are created later:

$(".notesTable tbody").on("click", "a", function() {
    var idVersionNote = $(this).attr("data-note-id");
    deleteVersionNote(idVersionNote);
});

It's called event delegation. If you do it like this, you won't need an id for the links, so you can just remove id="deleteLink", which was wrong anyway.

Answer 2

Couple of issues I see:

1) You are creating multiple HTML elements with the same id with this line:

append_data += '<td><a href="#" id="deleteLink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'

To quote from this post:

Most (if not all) browsers have and still do select the first element with a given ID, when calling getElementById

Which will cause unexpected results, so the first thing you should is fix this issue, one possible solution is to just change the id to a class instead, like so:

append_data += '<td><a href="#" class="deletelink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'

2) When you create the event handler, the element is not present in the DOM.

This line of code will never work:

$("#deleteLink").on(click, function() {
    var idVersionNote = this.attr("data-note-id");
    deleteVersionNote(idVersionNote);
});

Because #deleteLink does not exist when the code runs, #deleteLink will only be appended to DOM upon ajax success, later in time. So you should only create this event handler after the element actually exists.

Solution:

Fix the id problem mentioned in 1) and move the event handler inside the ajax.success call back, after you've appended the HTML, like so:

success: function(data) {
  /*console.log(data);*/
  var append_data = '';
  $.each(data, function(index, value) {
    /*console.log(value);*/
    append_data += '<tr>';
    append_data += '<td>' + value.user.loginUser+ '</td>';
    append_data += '<td>' + value.versionNote.tstampCreation+ '</td>';
    append_data += '<td>' + value.versionNote.tstamp + '</td>';
    append_data += '<td>' + value.versionNote.note + '</td>';
    append_data += '<td><a href="#" class="deletelink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'
    append_data += '</tr>';
  });
  $(".notesTable tbody").append(append_data);
  $(".deletelink").on(click, function() {
     var idVersionNote = this.attr("data-note-id");
     deleteVersionNote(idVersionNote);
  });

Answer 3

Add class to appended object instead of id.

append_data += '<td><a href="#" class="delete-link" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'

Then, listen click event of class by;

$(document).on('click', '.delete-link', function() {
   var idVersionNote = this.attr("data-note-id"); 
   deleteVersionNote(idVersionNote);
});