jquery - .remove()がjqueryモバイル変更ページ後に機能しない

Question

シンプルな jquery モバイル todo アプリを作成しています。

私のindex.htmlページにはリストビューがあり、各liには、各todoアイテムを完了としてマークできるリンクがあります。次に、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 にリダイレクトする add 関数です。

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);
    });

このバグは私を夢中にさせています - 誰でもこれが起こっている理由を指摘できますか?

ありがとうございました。