1

我正在编写一个简单的 jquery 移动待办事项应用程序。

在我的 index.html 页面上，我有一个列表视图，在每个 li 上我都有一个链接，可让您将每个待办事项标记为已完成。然后删除 li 并插入一个新的，其中包含一些额外的数据和不同的样式以表示它已完成。

这是它使用的功能：

markCompleted: function(id) {
    console.log(id);

    // Passing json as any store will be able to handle it (even if we change to localStorage etc)
    this.store.markCompleted(id, function(result) {

        if(result) {
            console.log("success - db updated and marked as completed");

            //var originalRow =  $('li#' + id),
            var originalRow =  $('*[data-row-id="'+id+'"]'),
                title = originalRow.find("h2").text(),
                desc = originalRow.find("p").text();

            console.log(originalRow);

            // re build the li rather than clone as jqm generates a lot of stuff

            var newRow = '<li data-row-id="' + id + '" class="completed"><a href="view.html" data-transition="slide" class="view" data-view-id="' + id +'"><h2>' + title + '</h2><p>' + desc + '</p></a><a href="#" data-icon="delete" data-iconpos="notext" class="mark-outstanding" data-mark-id="' + id +'">Mark as outstanding</a></li>';

            // Remove from pending
            originalRow.remove();

            // Add to completed
            $('.todo-listview').append(newRow);

            // Refresh dom
            $('.todo-listview').listview('refresh');

            console.log("id length = " + $('[id='+id+']').length);

        } else {
            alert("Error - db did not update and NOT marked as completed");
        }
    });
},

现在该代码在应用程序加载时工作正常，但是如果您导航到添加页面并添加一条记录，该记录在成功时会将您重定向回 index.html，originalRow.remove()上述 markCompleted 函数中的行不再有效。它创建新行但不删除原始行。

这是使用 changePage 重定向回 index.html 的添加功能

insert: function(json) {

    // Passing json as any store will be able to handle it (even if we change to localStorage etc)
    this.store.insert(json, function(result) {

        if(result) {
            console.log("success - add returned true");
            $.mobile.changePage( "index.html", {
                transition: "slide",
                reverse: true,
                changeHash: true,
            });

        } else {
            alert("Error on insert!");
        }

    });
},

事件绑定如下：

$(document).on('click', '.mark-completed', function(event) {
        console.log("Mark completed");
        //app.markCompleted(this.id);
        app.markCompleted($(this).data('mark-id'));
    });

$(document).on('click', '.add', function(event) {
        console.log("trying to insert via the add method");
        var data = JSON.stringify($('#insert').serializeObject()); 
        app.insert(data);
    });

这个错误让我发疯 - 谁能指出为什么会这样？

谢谢你。

4

0 回答 0