Как нажать на элемент, добавленный в HTML из того же JavaScript?

Question

Я получил несколько строк из базы данных по запросу ajax и добавил на свою HTML-страницу.Я хочу удалить запись, используя ajax, но она не работает.

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

Я добавил предупреждение, чтобы проверить, работает ли оно, но оно не работает, поэтому ошибка отсутствует в запросе.

Answer 1

Первая ошибка - идентификатор должен быть уникальным. Второе - неправильное делегирование события. Третий - опечатка в href="#",id="deleteMake",data-id

Давайте исправим их все:)

Исправьте опечатки и используйте 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>'
);

Исправлена ​​проблема с делегированием

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

Answer 2

1) <a href="#",id="deleteMake", - в HTML-теге не должно быть запятых.Замените запятые пробелами.

2) Чтобы установить обработчик на месте, а не в последующем блоке:

.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>')
        )
)

Если вы оставите код в своем стиле, то вы можете прикрепитьсобытие вроде этого:

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

В вашем коде события также прикрепляются до того, как будет сгенерировано содержимое, потому что обратный вызов результата XHR наверняка произойдет после того, как основной поток завершит выполнение.Эта проблема не возникает ни с одним из приведенного выше кода.Если вы ДОЛЖНЫ установить обработчики до генерации контента, используйте делегирование .on ():

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