Добавление события jquery на динамически добавляемый элемент в ajax

Question

В настоящее время у меня есть статическая таблица HTML в модальном окне начальной загрузки. Когда страница открывается, я заполняю таблицу некоторыми данными, которые я получил с помощью ajax get call с сервера.

• В случае успеха я обертываю свои данные в теги <td> и <tr> и добавляю всю структуру к моей <tbody> таблицы. Теперь, одна из вещей, которые я добавил в свою таблицу - это ссылка <a>. Я хочу как-то сослаться на этот элемент. Точнее, я пытаюсь создать какой-то обработчик событий, но безуспешно, он не работает

• Вот некоторые фрагменты из кода, во-первых, это обработчик событий в jQuery, во-вторых, моя функция, которая извлекает данные и динамически создает мое содержимое tbody.

Я пытался гуглить это дело, но без удачи, надеюсь, кто-то может помочь.

$("#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

Я вижу пару вопросов:

1) Вы создаете несколько элементов HTML с одинаковым id с помощью этой строки:

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

Цитировать из этого сообщения :

Большинство (если не все) браузеры имеют и все еще выбирают первый элемент с заданным идентификатором при вызове getElementById

Что приведет к неожиданным результатам, поэтому первое, что вам нужно, это исправить эту проблему, одно из возможных решений - просто заменить id на class вместо этого, например:

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

2) При создании обработчика события элемент отсутствует в DOM.

Эта строка кода никогда не будет работать:

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

Поскольку #deleteLink не существует во время выполнения кода, #deleteLink будет добавлен в DOM только при успешном выполнении ajax, позднее. Поэтому вы должны создавать этот обработчик событий только после того, как элемент действительно существует.

Решение:

Исправьте проблему с идентификатором, упомянутую в 1), и переместите обработчик события внутри обратного вызова ajax.success после добавления HTML, например, так:

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 2

Добавить класс в добавляемый объект вместо идентификатора.

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

Затем прослушайте событие клика класса;

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

Answer 3

Вы не можете иметь один и тот же идентификатор для более чем одного элемента. Кроме того, обработчик событий не работает, потому что элементы ссылки не существуют при его создании. Используйте что-то вроде этого, которое прикрепляет обработчик событий к ссылкам внутри tbody, даже если они создаются позже:

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

Это называется делегирование события . Если вы сделаете это так, вам не понадобится идентификатор для ссылок, поэтому вы можете просто удалить id="deleteLink", что в любом случае было неправильно.