Monacaでメモ帳アプリを開発している者です。

メモ帳アプリのテンプレートを元に作っているのですが、テンプレートにはメモの編集機能がありませんでした。

そこで、以下のように編集機能を加えてみたのですが、編集画面に移ると元のメモ内容が表示されないという現象が起こっています。

細かく言いますと、メモ登録後、最初に編集ボタンを押した際には元のメモ内容が表示されないのですが、再度入力し直して上書き保存を押すと、次に編集する際には、入力し直した内容がきちんと表示される、という複雑な現象です。

おそらく、 onShowLink あたりの記述が足りていないように思うのですが、改善方法をご教授いただけましたら幸いです。

どうぞよろしくお願い致します。

～～～index.html～～～

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- TOP Page -->
    <div data-role="page" id="TopPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <h1>メモ帳</h1>
            <a href="#AddPage" data-icon="plus" class="ui-btn-right">メモを追加</a>
        </header>
        <section data-role="content">
            <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">       
            </ul>
        </section>
    </div>

    <!-- Add Memo Page -->
    <div data-role="page" id="AddPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <h1>新しいメモ</h1>
        </header>
        <section data-role="content">
            <label for="Memo"></label>
            <textarea id="Memo"></textarea>
            <a data-role="button" data-icon="check" id="SaveBtn">保存</a>
        </section>
    </div>

    <!-- Detail Page -->
    <div data-role="page" id="ShowPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <a href="#EditPage" data-theme="b" class="ui-btn-right" id="EditBtn">編集</a>
            <h1></h1>
        </header>
        <section data-role="content">
            <p></p>
        </section>
    </div>

    <!-- Edit Memo Page -->
    <div data-role="page" id="EditPage">
        <header data-role="header" data-position="fixed">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <h1>メモを編集</h1>
        </header> 
        <section data-role="context">
            <input id="edit" type="text">

            <button onclick="saveEditedMemo()">上書き保存</button>
        </section>
    </div>

<script src="components/loader.js"></script>
<script src="js/memo.js"></script>
<script src="js/app.js"></script>
<script src="js/cssua.min.js"></script>
</body>
</html>

～～～app.js～～～

///// Save memo and return to top page
function onSaveBtn() {
    var text = $("#Memo").val();
    if (text != '') {
        // Save to local storage
        addMemo(text);
        // Clear form
        $("#Memo").val("");
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", { reverse: true });
}

///// Initialize top page
function initTopPage() {
    $("#TopListView").empty();

    var list = getMemoList();
    for (var i in list) {
        var memo = list[i];
        var d = new Date(memo.time);
        var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();

        $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
        $li.data("id", memo.id);
        $li.find("h3").text(date);
        $li.find("p").text(memo.text);
        $("#TopListView").prepend($li);
    }
    if (list.length == 0) {
        $li = $("<li>メモがありません</li>");
        $("#TopListView").prepend($li);
    }
    $("#TopListView").listview("refresh");  // Call refresh after manipulating list
}

///// Move to detail page
function onShowLink() {
    var $li = $(this).parent();
    selectedMemoId = $(this).parents('li').data("id");    
    var memoTitle = $li.find("h3").text();
    var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");

    $("#ShowPage h1").text(memoTitle);
    $("#ShowPage p").html(memoHtml);
    $.mobile.changePage("#ShowPage");
}

///// Delete memo
function onDeleteLink() {
    if (!confirm("このメモを削除しますか？")) {
      return;
    }
    var $li = $(this).parent();
    var id = $li.data("id");
    deleteMemo(id);

    initTopPage();

    // Return to top
    $.mobile.changePage("#TopPage", { reverse: true });
}

///// Called when app launch
function onReady() {
    initTopPage();
    $("#SaveBtn").click(onSaveBtn);
    $("#TopListView").on("click", "a.show", onShowLink);
    $("#TopListView").on("click", "a.delete", onDeleteLink);
}

///// Edit memo
function saveEditedMemo() {

    var editedText = $("#EditPage input#edit").val();

    if (editedText != '') {

        deleteMemo(selectedMemoId);

        addMemo(editedText);
        // Clear form
        $("#Memo").val("");
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", { reverse: true });
}

$(onReady); // on DOMContentLoaded