.remove（）在jquery移动更改页面后无法正常工作

Question

我正在编写一个简单的jquery mobile todo应用程序。

在我的index.html页面上，我有一个列表视图，每个我都有一个链接，允许您将每个待办事项标记为完整。然后删除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上面的markCompleted函数中的originalRow.remove()行不再作品。它创建新行但不删除原始行。

下面是使用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);
    });

这个错误让我发疯 - 有人能指出为什么会发生这种情况吗？

谢谢。