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的一部分。如果其中一个字段留空，我会看到以下文本注入#alerts div，但随后在几分之一秒内内容再次消失。

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()，当其中一个字段留空时，该测试有效。

如果内容在注入后仍保留在页面上，我该怎么办？

感谢您提供的任何帮助或见解！ -Mark

根据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事件的传播，才能触发按钮。您可以通过在false事件处理程序中返回click来执行此操作：

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/

jQuery Mobile：注入的内容然后立即消失

1 个答案: