Проблема с ajax-запросом на функцию удаления

Question

У меня есть приложение "todo", к которому я добавил кнопку удаления.Приложение уже настроено на публикацию с помощью ajax-запроса, но кнопка удаления вызывает перезагрузку страницы после ее нажатия.Я чувствую, что protectDefault должен ... хорошо предотвратить это, но это не так.Любые советы будут высоко ценится!

функция для отображения списка задач

function taskHtml(task) {
        var checkedStatus = task.done ? "checked" : "";
        var liClass = task.done ? "completed" : "";

        var liElement = '<li id="listItem-' + task.id + '" class="' + liClass + '">' +
        '<div class="view"><input class="toggle" type="checkbox"' + " data-id='" +
        task.id + "'" + checkedStatus + ' /><label>' + task.title + 
        '</label><a class="destroy" rel="nofollow" data-method="delete" href="/tasks/' + task.id + 
        '"></a></div></li>';

        return liElement;   

    }

функция удаления задачи

function deleteTask(e) {
        e.preventDefault();

        var itemId = $(e.target).data("id");

        $.ajax("/tasks/" + itemId, {
            _method: "DELETE",
        }).success(function(data) {
            var liHtml = taskHtml(data);
            var $li = $("#listItem-" + data.id);
            $li.replaceWith('');
        });
    }


    $.get("/tasks").success( function( data ) {
        var htmlString = "";
        $.each(data, function(index, task) {
            htmlString += taskHtml(task);
        });

        var ulTodos = $('.todo-list');
        ulTodos.html(htmlString);

        $('.toggle').change(toggleTask);

        $('.destroy').click(deleteTask);
    });

Answer 1

Удалите href из тега <a>.Я рекомендую изменить это значение на <button>, поскольку вы не переводите пользователя на другие страницы.

Я также подозреваю, что это не будет работать:

var itemId = $(e.target).data("id");

Попробуйте изменить его на:

var itemId = $(this).parent().data("id");