jQuery Mobile和表单提交

Question

我已决定跳转到支持Wordpress的移动主题的jQuery Mobile框架.

我现在遇到了在url中使用hash标签提交表单并尝试进行验证和ajax发布的问题.基本上它不起作用.

例如:website.com/contact/ < - works website.com/#/contact/ < - 不起作用

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

我有什么选择尝试让它发挥作用？我试图将.submit绑定到表单,做一些验证然后ajax发布它.

Update--

<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');
        }); 
 });

两者都不能与URL中的#一起使用.

我还在jquery.mobile.js文件中添加了这个:

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

仍然没有去.

(仅供参考,jQuery代替$是因为WordPress)

- 另一个更新.

由于我使用Wordpress,一些功能表现得很奇怪.和is_home()一样.无论我在哪个"页面",该函数都会恢复正常.我认为这与每个页面的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 已经准备好了;)（我在这里引用自己的话）