Question

我有一个简单的HTML / Javascript表单，在提交时检查用户名并传递Parse（.com）并根据特定用户显示正确的页面。

首次提交表单时，一切都运行良好。但是当提交然后返回到表单页面时（使用浏览器后退按钮），提交事件不再被触发（甚至不是console.log（））。不是按提交按钮而不是按Enter键。

以下是一些代码段：

目：

$(document).ready(function() {
    $("#form_login").submit(function(e) {
      console.log("In form submit login")
      init();
      var name = $("#inp_user").val();
      var pass = $("#inp_pass").val();
      console.log("Name: " + name + " User: " + pass)
      login(name, pass);
    })
 })

体：

<body>
<div data-role="page" id="page_login" data-theme="a">
    <div data-role="header">
        <h1>Login Screen</h1>
    </div>
    <div data-role="content">
        <div class="div-widget">
            <h3>Login details</h3>
            <form id="form_login">
                <div data-role="fieldcontain">
                    <label for="inp_user">User name:</label> <input type="email"
                        id="inp_user">
                </div>
                <div data-role="fieldcontain">
                    <label for="inp_pass">Password</label> <input type="password"
                        id="inp_pass">
                </div>
                <input type="submit" id="btn_login" value="Login"></input>
            </form>
        </div>
        <div class="div-widget">
            <span id="out_res"></span>
        </div>
    </div>
</div>
//More div data-role="page" here....
</body>

Answer 1

根据给定的信息，我在jsFiddle上做了一个新的例子。所以你忘了提到你正在使用jquery-mobile。此外，使用<form>会导致所描述的行为！

<body>
    <div data-role="page" id="page_login" data-theme="a">
        <div data-role="header">
            <h1>Login Screen</h1>
        </div>
        <div data-role="content">
            <div class="div-widget">
                <h3>Login details</h3>
                <!-- removed form - as you do not really need it-->
                <!-- you may keep it, but you MAY NOT submit the form! -->
                <div data-role="fieldcontain">
                    <label for="inp_user">User name:</label>
                    <input type="email"
                        id="inp_user">
                </div>
                <div data-role="fieldcontain">
                    <label for="inp_pass">Password</label>
                    <input type="password"
                        id="inp_pass">
                </div>
                <!-- <input type="submit" id="btn_login" value="Login"></input>-->
                <!-- instead, make use of button -->
                <a id="btn_login" href="#page_2" data-role="button">Login</a>
            </div>
            <div class="div-widget">
                <span id="out_res"></span>
            </div>
        </div>
    </div>
    <div data-role="page" id="page_2" data-theme="a">Page 2</div>
    <!-- More div data-role="page" here....  -->
</body>

我决定使用href - data-role="button"，而不是提交表单 - 这会在浏览器中“返回”时导致问题。如果登录失败，则绑定点击处理程序和prevent-Default（现在已注释掉）

$(document).ready(function() {
    $("#btn_login").click(function(e) {
      console.log("clicked href")

      //init(); // commented out as not provided within your question
      var name = $("#inp_user").val();
      var pass = $("#inp_pass").val();
      console.log("Name: " + name + " User: " + pass)
      //login(name, pass); // commented out as not provided within your question

      /*if (LOGIN_FAILED)
      {
          console.log("login failed");
          e.preventDefault(); 
      }*/
    })
 })

Javascript表单重新提交

1 个答案: