Ajax 请求在页面刷新之前不会更新数据库

Question

我正在为我正在创建的仪表板系统制作一个待办事项列表。

所以这个想法是用户可以添加新的 ToDo 项目、删除 ToDo 项目和完成/取消完成 ToDo 项目。我正在使用 codeIgniter 在这个项目中工作。

问题是当我添加一个任务时，它被添加到数据库中，但是当我在此之后删除它或完成它时，它还没有在数据库中更新。只有当我刷新页面并删除任务或完成任务后，它才会在数据库中更新。我已经检查了数据，并且已成功发送到控制器并从控制器发送到模型。由于某种原因，它只是没有在数据库中更新。

我正在使用 AJAX 发布请求将所有数据发送到 codeigniter 控制器。

$(document).ready(function () {
runBind();
function runBind() {

    /**
     * Deletes a task in the To Do list
     */
    $('.destroy').on('click', function (e) {
        var $currentListItem = $(this).closest('li');
        var $currentListItemLabel = $currentListItem.find('label');
        $('#main-content').trigger('heightChange');
        $.ajax({
            url: 'dashboard/deleteToDo',
            type: 'post',
            data: 'message=' + $currentListItemLabel.text()
        }).success(function (data) {
            $currentListItem.remove();
        }).error(function () {
            alert("Error deleting this item. This item was not deleted, please try again.");
        })
    });

    /**
     * Finish the to do task or unfinish it depending on the data attribute.
     */
    $('.toggle').on('ifClicked', function (e) {
        console.log("hallo");
        var $currentListItemLabel = $(this).closest('li').find('label');
        /*
         * Do this or add css and remove JS dynamic css.
         */
        if ($currentListItemLabel.attr('data') == 'done') {
            $.ajax({
                url: 'dashboard/finishToDo',
                type: 'post',
                data: 'message=' + $currentListItemLabel.text() + '&finish=' + false
            }).success(function (data) {
                console.log(data);
                $currentListItemLabel.attr('data', '');
                $currentListItemLabel.css('text-decoration', 'none');
            }).error(function () {
                alert("Error updating this item. This item was not updated, please try again.");
            })
        }
        else {
            $.ajax({
                url: 'dashboard/finishToDo',
                type: 'post',
                data: 'message=' + $currentListItemLabel.text() + '&finish=' + true
            }).success(function (data) {
                console.log(data);
                $currentListItemLabel.attr('data', 'done');
                $currentListItemLabel.css('text-decoration', 'line-through');
            }).error(function () {
                alert("Error updating this item. This item was not updated, please try again.");
            })
        }
    });
}

$todoList = $('#todo-list');

/**
 * Add a new To Do task.
 */
$("#frm_toDo").submit(function (e) {
    e.preventDefault();
    var url = $(this).attr('action');

    var method = $(this).attr('method');
    var data = $(this).serialize();
    $.ajax({
        url: url,
        type: method,
        data: data
    }).success(function (data) {
        addItemToHTMLList();
        $('#new-todo').val('');
    }).error(function () {
        alert("Error saving this task. This task has not been saved, please try again.");
    });
});

/**
 * Adds the task that has been created directly to the HTML page
 */
var addItemToHTMLList = function () {
    $('.destroy').off('click');
    $('.toggle').off('click');
    var todos = "";
    todos +=
        "<li>" +
        "<div class='view'>" +
            "<div class='row'>" +
                "<div class='col-xs-1'>" +
                    "<input class='toggle' type='checkbox'>" +
                "</div>" +
                "<div class='col-xs-10'>" +
                    "<label id='item'>" + " " + $('#new-todo').val() + "</label>" +
                "</div>" +
                "<div class='col-xs-1'>" +
                    "<a class='destroy'></a>" +
                "</div>" +
            "</div>" +
        "</div>" +
        "</li>" + $todoList.html();
    $todoList.html(todos);
    $todoList.find('input').iCheck({checkboxClass: 'icheckbox_flat-grey', radioClass: 'iradio_flat-grey'});
    runBind();
    $('#main').show();
}
});

如果你能帮助我，那就太好了，因为我不知道。我检查了所有数据，但在页面刷新之前它没有在数据库中更新。

Answer 1

您是否使用浏览器开发工具比较了 XHR 请求以确保它们 100% 等效（删除现有待办事项与删除新添加待办事项）？

另外，典型的模式是使用某种 id 而不是使用整个消息作为匹配器——您是否考虑过对 todo 的 id 进行完成/删除操作而不是发送 todo 的文本？如果您不想暴露您的数据库 ID，您可以创建一个唯一的 ID。

Answer 2

问题是您在页面完成初始化并且事件已附加后创建对象。您需要将事件分配给父元素，以便该元素将事件委托给待办事项中的任何新项目。请参阅 jQuery 文档中的“委托事件”部分：http://api.jquery.com/on/