jQMでのDOM操作でハマった

jQuery Mobile jQuery

現在、jQMを使ったアプリを作成しようと思い
いろいろ試しているのですが、深みにハマってしまったのでエントリー。


サンプルで以下のような画面を作成しました。

ソースは以下のとおり（抜粋）

    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <h1>Sample</h1>
            </div>
            <div data-role="content">
                <form action="" method="post">
                    <input type="submit" id="submit" value="変更" />
                    <div id="chgTable">
                        テストです。
                    </div>
                </form>
            </div>
            <div data-role="footer">
                <h1>footer</h1>
            </div>
        </div>
    </body>

id="chgTable"の内容を変更したいために
JavaScriptを以下のようにコーディングしてみる。

<script type="text/javascript">
        $(function(){
           $("#submit").click(function(){
             $("#chgTable").html("書き換えました。");
           });
        });
</script>


これでうまくいくかな？と思っていたのですが
そうすぐにはうまくいかなく、書き換わるっぽいのだが
また、初期表示されてしまうらしく内容が戻ってしまう。


うーん、どうすればいいのだろう。