Попытка динамически создать кнопку удаления и вызвать функцию удаления в JavaScript - PullRequest
Новая
       31

Попытка динамически создать кнопку удаления и вызвать функцию удаления в JavaScript

1 голос
/ 24 мая 2019

Идея для этой страницы состоит в том, чтобы загрузить «навыки» из моего java-приложения и динамически создать кнопку «Удалить», которая позволяет мне удалять эти «навыки» из приложения.

Ошибка при попытке нажатькнопка для удаления навыка.

manageTech: 1 Uncaught ReferenceError: deleteMe не определено в HTMLButtonElement.onclick (manageTech: 1)

js file: 

$( document ).ready( () => {

    var url = window.location;

    // GET REQUEST
    $("#btnGetFiles").click( (event) => {
        event.preventDefault();
        ajaxGet();
    });

function deleteMe(id) {
    window.alert("Button clicked, id " + id + ", text");
    $.ajax({
        url: '/api/technologyList' + '/' + id,
        type: 'DELETE',
        success: function() {
           ajaxGet();
       }
    })
}

// DO GET
function ajaxGet() {
$.ajax({
    type: 'GET',
    url: '/api/technologyList',
    success: function (skills) {
        $.each(skills, function (i, skill) {
            $('#listFiles').append('<tr>' + '<td>' + '<button ' +
                'type="submit" ' +
                'data-id="' + skill.id + '" ' +
                'onclick="deleteMe('+skill.id+')"' +
                'name="deletebtn">' +
                'Delete' +
                '</button>' + '</td>' +
                '<td>' + skill.id + '</td>' +
                '<td>' + skill.logo + '</td>' +
                '<td>' + skill.techName + '</td></tr>')
        })



    }
    });
    }
});

1 Ответ

3 голосов
/ 24 мая 2019

Ваш deleteMe не находится на верхнем уровне - он находится внутри вашего $( document ).ready( () => {, поэтому он не является глобальной переменной, поэтому встроенный обработчик onclick="deleteMe('+skill.id+')" завершается ошибкой.(Встроенные обработчики могут ссылаться только на глобальные переменные на верхнем уровне.)

Хотя вы можете исправить это, переместив deleteMe наружу, встроенные обработчики - плохая практика;рассмотрите возможность правильного подключения прослушивателя событий с использованием Javascript.Удалите встроенный обработчик и используйте делегирование события: 

$('#listFiles').on('click', 'button[name="deletebtn"]', function() {
  deleteMe(this.dataset.id);
});
...