jQuery Mobile 和表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4935887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile and Form Submission
提问by jdruid
I have decided to jump into the jQuery Mobile framework for a Wordpress enabled mobile theme.
我已决定跳入 jQuery Mobile 框架以实现支持 Wordpress 的移动主题。
I am now running into the issue of submitting forms with the hash tag in the url and trying to do validation and ajax posting. Basically it does not work.
我现在遇到了在 url 中使用哈希标签提交表单并尝试进行验证和 ajax 发布的问题。基本上它不起作用。
ex: website.com/contact/ <- works website.com/#/contact/ <- does not work
例如： website.com/contact/ <- 有效 website.com/#/contact/ <- 无效
I am aware of the rel="external" tag for href's which eliminate the # from the url. But I have blog posts with a custom plugin that renders sign up forms that I will not be able to use the rel="external" for. I guess I could use it for all links but that would eliminate the smooth transitions.
我知道 href 的 rel="external" 标记消除了 url 中的 #。但是我有一些带有自定义插件的博客文章，该插件呈现我将无法使用 rel="external" 的注册表单。我想我可以将它用于所有链接，但这会消除平滑过渡。
What are my options to try and get this to work? I am trying to bind the .submit to the form, do some validation and then ajax post it.
我有什么选择可以尝试让它发挥作用？我正在尝试将 .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>
and my script:
和我的脚本：
jQuery(document).ready(function() {
jQuery("#contact_submit").submit(function(){
alert('WTF');
});
});
Changed that to:
将其更改为：
<form id="myform" action="myfile.php" method="post">
<input type="text" id="mytext" name="mytext" />
<input type="button" id="myform_submit" value="Submit">
</form>
and my script:
和我的脚本：
jQuery(document).ready(function() {
jQuery("#contact_submit").click(function(){
alert('WTF');
});
});
Both do not work with the # in the url.
两者都不适用于 url 中的 #。
I also added this BEFORE the jquery.mobile.js file:
我还在 jquery.mobile.js 文件之前添加了这个：
<script type="text/javascript">
jQuery(document).bind(
"mobileinit", function(){
jQuery.extend( jQuery.mobile, { ajaxFormsEnabled: false });
});
</script>
Still no go.
还是不行。
(FYI the jQuery instead of $ is because of WordPress)
（仅供参考，jQuery 而不是 $ 是因为 WordPress）
--another update.
——另一个更新。
Since I am using Wordpress some of the functions are acting weird. Like is_home(). No matter what 'page' I am on the function comes back as true. I think this has to do with the ajax calls for each page.
因为我使用的是 Wordpress，所以有些功能表现得很奇怪。就像 is_home()。无论我在哪个“页面”上，函数都会返回真实。我认为这与每个页面的 ajax 调用有关。
采纳答案by naugtur
You can switch off AJAX wrapping. Read here: http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
您可以关闭 AJAX 包装。在这里阅读：http: //jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
Also - I've seen something about problems with slashes, but now I can't find it, so be sure to use alpha3 version of JQM
另外 - 我已经看到一些关于斜线问题的东西，但现在我找不到它，所以一定要使用 alpha3 版本的 JQM
[edit]
[编辑]
This was mentioned a few times before - in some other threads. If you go to a page and JQM loads it with AJAX, then only bodyis taken AND NO document.ready fires, as the dom is ready already ;) (I'm quoting myself here)
之前曾多次提到过这一点 - 在其他一些线程中。如果你转到一个页面并且 JQM 用 AJAX 加载它，那么只body被采用并且没有 document.ready 触发，因为 dom 已经准备好了;)（我在这里引用自己）
回答by Zachary Abresch
I'm not entirely sure where you are calling your jQuery.readyfunction but the recommended way to register handlers is by binding to the pagecreateevent for your specific pages. The pagecreateevents should be handled by jQuery.readyin the first page only. I recently built a site using jQuery mobile and I ran into exactly this problem. The following code should get you where you want to be:
我不完全确定您在哪里调用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;
});
});
});
Unfortunately, I didn't experiment enough to determine if all of that is necessary. I do know that this did the trick for me. I almost instincively add the return falseto all of my form submits that are handled by AJAX. Hope this help!
不幸的是，我没有进行足够的实验来确定所有这些是否必要。我知道这对我有用。我几乎本能地将return false加到我所有由 AJAX 处理的表单提交中。希望这有帮助！
