Question

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

由于我使用自己的Ajax逻辑执行表单提交过程，因此我在表单上使用data-ajax="false"禁用了Jquery Mobile Ajax逻辑。 Ajax逻辑是用JavsScript实现的。在开始页面上一切正常，但是如果我导航到另一个页面（通过起始页面上的链接），我的JavaScript不再被激活，但是表单是通过Jquery移动自己的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“我们用新的URL替换了page-div和其他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>

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

Answer 1

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

如果仍然使用ajax加载页面，则所有其他页面都会加载到DOM中。因此，您将拥有多个具有相同ID的表单。加载第一页时，DOM中只有一个表单，并使用该表单。但是当加载另一个页面时，会向DOM添加其他表单（具有相同的id）。然后，当您单击提交按钮时，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">

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

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

此外，所有内容都应该包含在正确的jQuery Mobile page event 中：

$(document).on('pageinit', '[data-role="page"]', function(){ 
    $(document).on('click','#submit-btn',function() {
        $.mobile.activePage.find('#loginForm').submit();
    });      
});

PHP包括JavaScript在Jquery Mobile中无法正常工作

1 个答案: