0

在我的 jquery 移动网络应用程序中，我在用户导航到的每个页面上都包含一个登录表单。我这样做是为了让用户可以随时登录，而不仅仅是在起始页上。

由于我使用自己的 Ajax 逻辑执行表单提交过程，因此我在表单上禁用了 Jquery Mobile Ajax 逻辑data-ajax="false"。Ajax 逻辑是用 JavsScript 实现的。在起始页上一切正常，但如果我导航到另一个页面（通过起始页上的链接），我的 JavaScript 不再触发，但表单是通过 Jquery mobile 自己的 Ajax 逻辑提交的（因此它不会' t 有效）。

代码（我在每一页都包含）如下所示：

   <div data-role="fieldcontain">
        <form id="loginForm" data-ajax="false" onsubmit="login();return false;">
            <div data-role="fieldcontain">
                <h2>Login</h2>
                <label for="textinput1">
                    Email
                </label>
                <input name="emaillogin" id="textinput1" placeholder="Email" value=""
                type="text">
                <label for="textinput2">
                    Password
                </label>
                <input name="passwordlogin" id="textinput2" placeholder="Password" value=""
                type="password">
            </div>
            <input type="submit" data-icon="ok" data-iconpos="left" value="OK">
            <input type="hidden" name="inputCase" value="login">
        </form>
    </div>

JavaScript（就在上述代码的末尾）如下所示：

<script>
function login()
{
    var request = $.ajax({
      url: "../case.php",
      type: "POST",
      data: $('#loginForm').serialize(),
      dataType: "json"
    });

    request.done(function(msg) {
            if(parseInt(msg.status)==1)
            {
                //top_notification("Willkommen zurück!","success");
                window.location="index.php";
            }
            else if(parseInt(msg.status)==0)
            {
                alert(msg.text);
            }
            else {
                alert("Gibts nicht");
            }
    });

    request.fail(function(jqXHR, textStatus) {
        alert("Fehler");
    });
}
</script>

也许我弄错了 Jquery Mobile“我们只page-div用新 URL 中的另一个替换page-div”的事情，但我这样理解，我的整个 JS 逻辑也将从新资源中提取。

编辑谢谢。我已经更新了我的 JS 代码，现在看起来像这样：

<script>
$(document).on('pageinit', '[data-role="page"]', function(){ 
    $(document).on('click','#submit-btn',function() {
        login();
    });      
});

function login()
{
    var request = $.ajax({
      url: "../case.php",
      type: "POST",
      data: $('#loginForm').serialize(),
      dataType: "json"
    });

    request.done(function(msg) {
            if(parseInt(msg.status)==1)
            {
                //top_notification("Willkommen zurück!","success");
                window.location="index.php";
            }
            else if(parseInt(msg.status)==0)
            {
                alert(msg.text);
            }
            else {
                alert("Gibts nicht");
            }
    });

    request.fail(function(jqXHR, textStatus) {
        alert("Fehler");
    });
}
</script>

但。现在，当我导航到 3 个页面，然后提交登录表单时，我将收到该功能的 3 个警报（即使我仅导航到 1 个站点）request.fail......之后登录正确！

4

1 回答 1

1

Ajax 仍然是您的问题。您已禁用 ajax 表单提交，但仍使用 ajax 加载其他页面。这只是我的假设，因为您没有提到 ajax 是一起关闭的。

如果仍然使用 ajax 来加载页面，那么所有其他页面都会加载到 DOM 中。因此，您将拥有多个具有相同 ID 的表单。当您的第一个页面被加载时，DOM 中只有一个表单，并且使用了该表单。但是当另一个页面被加载时，额外的表单（具有相同的 id）被添加到 DOM 中。当你点击提交按钮时，jQuery 会从 DOM 中找到具有该 ID 的第一个表单。并且因为其中有 2 个，它会首先提交加载了初始页面的相同表单。

这就是为什么你永远不要在 jQuery Mobile 中使用内联 javascript。

代替

onclick="..."

您的提交按钮应该有一个id并制作它type="button"。

<input type="button" data-icon="ok" data-iconpos="left" value="OK" id="submit-btn">

在每个按钮上放置一个单击事件，并使用 $.mobile.activePage 选择器在当前活动页面上查找表单。

$(document).on('click','#submit-btn',function() {
    $.mobile.activePage.find('#loginForm').submit();
});

此外，所有内容都应包含在正确的 jQuery Mobile页面事件中：

$(document).on('pageinit', '[data-role="page"]', function(){ 
    $(document).on('click','#submit-btn',function() {
        $.mobile.activePage.find('#loginForm').submit();
    });      
});
于 2013-05-23T12:27:49.197 回答