ajax请求删除功能的问题

Question

我有一个添加了删除按钮的“待办事项”应用程序。该应用程序已设置为通过 ajax 请求发布，但删除按钮在单击后会导致页面重新加载。我觉得 preventDefault 应该......很好地防止这种情况发生，但事实并非如此。任何建议将不胜感激！

列出任务的功能

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

从<a> 标记中删除href。我建议将其更改为 <button>，因为您不会将用户带到任何其他页面。

我也怀疑这行不通：

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

尝试将其更改为：

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