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

Question

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

由于我使用自己的 Ajax 逻辑执行表单提交过程，因此我在表单上使用 data-ajax="false" 禁用了 Jquery Mobile Ajax 逻辑。 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 个页面，然后提交登录表单时，我将收到 request.fail 函数的 3 个警报（即使我仅导航到 1 个站点）...之后登录正确！

Answer 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 中 page event:

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