Javascript ajax请求删除函数时出现问题

我有一个“todo”应用程序，我在其中添加了一个删除按钮。应用程序已经设置为通过ajax请求发布，但是单击delete按钮后会导致页面重新加载。我觉得我应该。。。我们可以防止这种情况发生，但事实并非如此。任何建议都将不胜感激

用于列出任务的函数

---

从

标记中删除

href

。我建议将此更改为

，因为您不会将用户带到任何其他页面

我还怀疑这是行不通的：

var itemId=$（e.target）.data（“id”）

尝试将其更改为：

var itemId=$（this.parent（）.data（“id”）
将
$.ajax（“/tasks/”+itemId，{
更改为
$.post（“/tasks/”+itemId，{
）并查看它是否有效。如果可能的话，还可以检查控制台。@TheAlpha没有骰子，但我很感激这个提示！为什么
preventDefault（）
不阻止
href
被跟踪？
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);
    });