Question

我有一个重定向到另一个页面的页面。在第二页，我阻止.submit（）发生并做自己的事情。我是通过使用以下代码完成的：

<!DOCTYPE html>
<html>
    <head>
        <title>Email</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <link rel="stylesheet" href="themes/customtheme.css" />
        <link rel="stylesheet" href="style.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#emailForm").submit(function() {
                    console.log("Submit prevented.");
                    $.ajax({
                        type: "POST", 
                        url: "send.php",     
                        data: {
                            email: $("#email").val()
                        },
                        success: function(data) {
                            var obj = jQuery.parseJSON(data);
                            window.location = obj.url;
                        }
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <a class="ui-btn-left" href="index.html" data-icon="back">Terug</a>
                <h1><span></span></h1>
                <a class="ui-btn-right" href="#" data-icon="info">i & &euro;</a>
            </div>
                <div class="inform">
                    <form id="emailForm" action="send.php" method="POST">
                        <span>Email adress:</span>
                        <input type="text" name="email" id="email"></input>
                        <input type="submit" value="Send" />
                    </form>
                </div>
            </div>
            <div data-role="footer" data-position="fixed"></div>
        </div>
    </body>
</html>

当我直接导航到此enteremail.html页面时，一切正常。我的提交被捕获并且函数启动而不是通过表单重定向到send.php。

但是当我从可以导航到此index.html的{{1}}开始时，JQuery显然已经加载了Ajax调用或其他东西。无论如何，该函数不会被加载/调用。我需要刷新enteremail.html才能使函数正常工作。我该如何解决这个问题？

Answer 1

http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

默认链接行为：Ajax 要启用动画页面转换，请执行所有操作指向外部页面的链接（例如products.html）将是通过Ajax加载。为了不引人注意地执行此操作，框架解析了 link的href来制定一个Ajax请求（Hijax）并显示加载微调器。所有这些都是由jQuery Mobile自动完成的。

我相信jQuery mobile会向服务器发出AJAX请求，从响应中裁剪data-role="page"项，并用它替换当前的data-role="page"。这可以解释为什么你的JS代码在导航时没有执行，但是在刷新时会执行。

无Ajax链接指向其他域或具有的链接 rel =“external”，data-ajax =“false”或目标属性不会加载了Ajax。相反，这些链接将导致整页刷新没有动画过渡。

尝试禁用AJAX导航。这将导致正常导航。

干杯。

Answer 2

我将脚本从<head>移至<body>，特别是<div data-role="page">。然后它工作，因为头部的东西只是第一次由Ajax加载。

防止提交仅在刷新后有效

2 个答案: