0

我有一个页面重定向到另一个页面。在第二页上，我阻止 .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可以导航到这个的开始时enteremail.html，JQuery 显然已经加载了 Ajax 调用或其他东西。无论如何，该函数不会被加载/调用。我需要刷新enteremail.html才能使功能正常工作。我怎么解决这个问题？

4

2 回答 2

2

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

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

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

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

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

干杯。

于 2013-11-04T16:07:49.423 回答
0

我将脚本从 移动<head>到<body>，特别是在<div data-role="page">. 然后它起作用了，因为 head 中的内容仅由 Ajax 第一次加载。

于 2013-11-04T16:07:30.680 回答