jQuery Mobile:注入的内容出现，然后立即消失

Question

我有一个使用jQuery Mobile的登录页面，其中包含以下代码：

  <div id="loginPage" data-role="page" data-theme="a">
    <div data-role="content">
      <div id="alerts"></div>
      <form id="login-form">
        <input type="text" id="username" name="username" value="" placeholder="username or email" />
        <input type="password" id="password" name="password" value="" placeholder="password" />
        <button id="login-button" onClick="userLogin()">Login</button>
      </form>
    </div><!-- /content -->
  </div><!-- /page -->

这是我的javascript的一部分，当用户单击"登录"按钮时会调用它。如果其中一个字段为空，我会看到以下文本被注入到#alertsdiv中，但在几分之一秒内，内容又消失了。

if (username.length == 0 || password.length == 0) {
  //alert('Please enter your username or email and your password');
  $('#alerts').html('Please enter your username or email and your password.').trigger('create');
}

我还使用.append()而不是.html()进行了尝试。两者的结果相同。我已经注释掉了我的测试alert()，它在其中一个字段为空时有效。

我该怎么做才能确保内容在注入后仍保留在页面上

感谢您提供的任何帮助或见解-标记

根据Jasper的请求，以下是点击"登录"按钮时执行的所有javascript：

function userLogin() {
  var username = $("#username").val();
  var password = $("#password").val();
  if (username.length == 0 || password.length == 0) {
    $('#alerts').append('Please enter your username or email and your password.').trigger('create');
  }
  else {
    $.post("services/user-status.php", { type: 'login', username: username, password: password },
      function(data) {
        var response = data.item;
        console.log(response);
        if (response.loggedIn == false) {
          $('#alerts').html('The username/email and password you used did not work. Please try again.').trigger('create');
        }
        else {
          localStorage.userID = response.userID;
          localStorage.username = response.username;
          localStorage.userStatus = 'loggedIn';
          $.mobile.changePage('profile.html');
        }
      },'json');
  }
}

Answer 1

看起来您需要停止click事件的传播以触发按钮。您可以通过在click事件处理程序中返回false来完成此操作：

HTML--

<button id="login-button" onClick="return userLogin()">Login</button>

JS--

function userLogin() {
    ...
    return false;
}​

下面是一个演示：http://jsfiddle.net/BkMEB/3/

此外，由于您使用的是jQuery，因此可以绑定到<button>元素，如下所示：

$('#login-button').bind('click', userLogin);

这与将onClick="return userLogin()"作为按钮的属性相同，但允许您删除内联JS。

下面是一个演示：http://jsfiddle.net/BkMEB/4/