jQuery Mobile 和表单提交

Question

我决定跳入 jQuery Mobile 框架来实现支持 Wordpress 的移动主题。

我现在遇到了提交带有 url 中的哈希标签的表单并尝试进行验证和 ajax 发布的问题。基本上是行不通的。

例如：website.com/contact/ <- 有效 website.com/#/contact/ <- 不起作用

我知道 href 的 rel="external" 标签可以消除 url 中的 #。但我有一些带有自定义插件的博客文章，该插件会呈现我无法使用 rel="external" 的注册表单。我想我可以将它用于所有链接，但这会消除平滑过渡。

我可以采取哪些选择来尝试使其发挥作用？我正在尝试将 .submit 绑定到表单，进行一些验证，然后 ajax 发布它。

更新 -

<form id="myform" action="myfile.php" method="post">
<input type="text" id="mytext" name="mytext" />
<input type="submit" id="myform_submit" value="Submit">
</form>

和我的脚本：

jQuery(document).ready(function() { 
 jQuery("#contact_submit").submit(function(){
        alert('WTF');
        }); 
 });

将其更改为：

<form id="myform" action="myfile.php" method="post">
<input type="text" id="mytext" name="mytext" />
<input type="button" id="myform_submit" value="Submit">
</form>

和我的脚本：

jQuery(document).ready(function() { 
 jQuery("#contact_submit").click(function(){
        alert('WTF');
        }); 
 });

两者都不适用于网址中的 #。

我还在 jquery.mobile.js 文件之前添加了这个：

<script type="text/javascript">
jQuery(document).bind(
   "mobileinit", function(){
   jQuery.extend( jQuery.mobile, { ajaxFormsEnabled: false });
   });
</script>

仍然不行。

（仅供参考，jQuery 而不是 $ 是因为 WordPress）

——另一个更新。

由于我使用的是 WordPress，所以有些功能表现得很奇怪。就像 is_home() 一样。无论我在哪个“页面”，该函数都会返回 true。我认为这与每个页面的 ajax 调用有关。

Answer 1

我不完全确定您在哪里调用 jQuery.ready 函数，但注册处理程序的推荐方法是绑定到特定页面的 pagecreate 事件。 pagecreate 事件应仅由首页中的 jQuery.ready 处理。我最近使用 jQuery mobile 构建了一个网站，并且遇到了这个问题。以下代码应该可以让您到达您想要的位置：

jQuery(document).ready(function() {
    $("#id_of_page").live('pagecreate', function() {
        $("form").submit(function(event) {
            event.stopPropagation();
            event.preventDefault();

            // Do stuff here (usually AJAX);

            return false;
        });
    });
});

不幸的是，我没有进行足够的实验来确定所有这些是否都是必要的。我确实知道这对我有用。我几乎本能地将 return false 添加到由 AJAX 处理的所有表单提交中。希望这有帮助！

Answer 2

您可以关闭 AJAX 包装。阅读此处： http://jquerymobile.com/demos/1.0a3/# docs/api/globalconfig.html

另外 - 我见过一些关于斜线问题的内容，但现在我找不到它，所以一定要使用 alpha3 版本的 JQM

[编辑]

这被提到了几次之前 - 在其他一些线程中。如果您转到一个页面并且 JQM 使用 AJAX 加载它，则仅采用 body 并且不会触发 document.ready，因为 dom 已经准备好;)（我在这里引用自己的话）