表单提交后，JQuery Mobile Button onClick事件将无法运行

Question

我正在使用JQuery提交表单，并且在提交表单后按钮单击事件停止工作。有任何想法吗？

详细说明：

• 表单提交后显示两个表单
• 表单提交后按钮的单击功能不起作用
• 如果单击“编辑”按钮，将显示一个带有减号按钮的新表单以删除该消息。单击完成按钮将提交表单。

期望的结果：   - 单击“完成”时仅显示txtmessages_after div

小提琴链接：http://jsfiddle.net/u3DVW/

            <div data-role="page" id="p1">
            <div data-role="header" data-theme="a"> <a id="edit" data-role="button" data-theme="b" data-role="button">Edit</a>

            <h3>Test</h3>

            </div>
            <script>
            $(document).ready(function () {

                var phone_list = "";

                $("#txtmessages_after").hide();

                $("form#frmEditMessages").submit(function (e) {
                    $("#txtmessages_after").hide();
                });

                $(".viewText").click(function (e) {

                    var type = $(this).attr("data-type");
                    $("#mobileNumber").val($(this).attr("data-number"));
                    $("#mobileNumber2").val($(this).attr("data-number"));

                    if (type != "remove") {
                        //$("form#frmmessages").submit();
                        alert('this form would go to another page');
                    } else {
                        phone_list = phone_list + $("#mobileNumber2").val() + ",";
                        $("#" + $("#mobileNumber2").val()).remove();
                    }
                });

                $("#edit").click(function (e) {

                    if ($(this).text() == "Edit") {
                        $("#edit  .ui-btn-text").text("Done");
                        $("#txtmessages_after").show();
                        $("#txtmessages_before").hide();
                    } else {
                        $("#edit  .ui-btn-text").text("Edit");
                        $("#txtmessages_after").hide();
                        $("#txtmessages_before").show();
                        $("#mobileNumber2").val(phone_list);
                        if (phone_list != "") {
                            $("form#frmEditMessages").submit();
                            $("#txtmessages_after").show();
                        }
                    }
                });
            });
            </script>
            <div data-role="content">
            <div id="txtmessages_before">
            <form id="frmmessages" action="/viewtext" method="post">
            <ul data-role="listview" data-theme="d" data-dividertheme="d" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search messages...">
            <li>
            <a class="viewText" href="#" data-type="standard" data-number="5551212">
            <h3>
            555-1212
            </h3>
            <p>
            Example Message
            </p>
            <p class="ui-li-aside">
            <strong>
            12/29/2013
            </strong>
            </p>
            </a>

            </li>
            </ul>
            <input name="mobileNumber" id="mobileNumber" type="hidden" />
            <input name="keyword" id="messagesKeyword" type="hidden" value="" />
            </form>
            </div>
            <div id="txtmessages_after">
            <form id="frmEditMessages" method="post" action="">
            <ul data-role="listview" data-theme="d" data-dividertheme="d" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search messages...">
            <li id="5551212">
            <a href="#">
            <h3>
            555-1212
            </h3>
            <p>
            Example Message
            </p>
            <p class="ui-li-aside">
            <strong>
            12/29/2013
            </strong>
            </p>
            </a>

            <a class="viewText" href="#" data-number="5551212" data-type="remove" data-icon="minus" data-theme="e"></a> 
            </li>
            </ul>
            <input name="mobileNumber2" id="mobileNumber2" type="hidden" />
            <input name="keyword2" id="messagesKeyword2" type="hidden" value="" />
            </form>
            </div>
            </div>