Добавление кнопки с событием onclick в .append () с помощью JQuery / JavaScript

Я хочу добавить кнопку удаления в каждую строку, где статус ЗАКАЗАН. Пробовал разные варианты. Это решение могло работать без ошибки «Невозможно прочитать свойство 'id' of undefined», даже если data [i] не undefined. Предупреждение перед .click () дает правильный идентификатор. Что здесь не так? Могу я здесь сделать что-то по-другому или лучше?

).done( (data, status, jqXHR) => {
        if (data[0].order_username != undefined) {
            $("#orders_table").empty();
            for(var i = 0; i < data.length; i++) {
                var button = "";
                if (data[i].status == "ORDERED") {
                    button = "<td><button class='delete'>Delete</button></td>";

                }

                $("#orders_table").append(
                    "<tr>" +
                    "<td>" + data[i].order_username + "</td>"+
                    "<td>" + data[i].work_description + "</td>" +
                    "<td>" + dateFormatter(data[i].orderdate) + "</td>" +
                    "<td>" + dateFormatter(data[i].startdate) + "</td>" +
                    "<td>" + dateFormatter(data[i].readydate) + "</td>" +
                    "<td>" + dateFormatter(data[i].accepteddate) + "</td>" +
                    "<td>" + dateFormatter(data[i].denieddate) + "</td>" +
                    "<td>" + data[i].comment_of_work + "</td>" +
                    "<td>" + data[i].hours + "</td>" +
                    "<td>" + data[i].approx_budget + "</td>" +
                    "<td>" + data[i].status + "</td>" +
                    button + 
                    "</tr>"
                )

                alert(data[i].id);
                $(".delete").click(() => {
                    deleteUser(data[i].id);
                })
            }
        }

        function deleteUser(key) {
            $.ajax(
            {
                url: "http:localhost:3001/workorders_delete/"+key,
                method: 'delete'
            }).done( (data, status, jqXHR) => {

            }).fail( (jqXHR, status, errorThrown) => {
                console.info("Call failed: "+errorThrown);
            });
    }

javascript jquery

17.11.2018 15:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Вы можете установить уникальные атрибуты данных для кнопок удаления, используя идентификаторы из данных ответа следующим образом: -

 if (data[i].status == "ORDERED") {
     button = "<td><button class='delete' data-deleteId = 
              "+data[i].id+">Delete</button></td>";
 }

а затем вы можете написать прослушиватель событий одного щелчка для кнопок удаления следующим образом: -

$(".delete").click(function(){
    var id = $(this).data("deleteId");
    deleteUser(id);
});

В вашем коде: -

  $(".delete").click(() => {
    deleteUser(data[i].id);
  });

функция deleteUser () вызывается или выполняется по щелчку мыши, и в точке data [i] .id не будет определен.

В стрелочных функциях нет явного this

— 17.11.2018 16:22

17.11.2018 15:59

Почему `data[i]undefined`?

В цикле i - это ссылка на ту же переменную, которая имеет значение data.length после цикла.

Как и ожидалось, data[data.length] - это undefined. Проверьте это с помощью alert(i) внутри .click().

$(".delete").last().click(() => {
    alert(i);
    deleteUser(data[i].id);
})

Упрощенный пример:

(function wrong() {
  var array = [];
  for (i = 0; i < 2; i++) {
    array.push(() => {
      console.info(i);
    });
  }
  array.forEach(click => click());
})();

Решение - создать новый const в цикле:

(function right() {
  var array = [];
  for (i = 0; i < 2; i++) {
    const constI = i;
    array.push(() => {
      console.info(constI);
    });
  }
  array.forEach(click => click());
})();

Кроме того...

$(".delete") относится к кнопкам удаления все, которые существуют в момент регистрации .click().

Вы должны зарегистрироваться только на последней кнопке удаления:

const constI = i;
$(".delete").last().click(() => {
    deleteUser(data[constI].id);
})

17.11.2018 16:07

Другие вопросы по теме

При наведении курсора отображать контент с тем же идентификатором

Получить переменную из формы umbraco с помощью jquery

Могу ли я узнать сработавший объект DOM внутри добавленной функции jQuery?

Возможно ли, что вызов функции javascript на основе запроса PHP CURL

JQuery :: сложение двух чисел

Как обернуть родственный текст элементов тегом с помощью javascript / jquery?

Как передать значение js с одной html-страницы на другую

Функция загрузки jquery с несколькими значениями

Проблемы с запуском ajax

Как прикрепить событие к элементу управления

Добавление кнопки с событием onclick в .append () с помощью JQuery / JavaScript

Ответы 2

Почему data[i]undefined?

Кроме того...

Другие вопросы по теме

Похожие вопросы

Почему `data[i]undefined`?