我决定跳入 jQuery Mobile 框架来实现支持 Wordpress 的移动主题。
我现在遇到了提交带有 url 中的哈希标签的表单并尝试进行验证和 ajax 发布的问题。基本上是不行的。
例如:website.com/contact/<- 有效 website.com/#/contact/<- 不起作用
我知道 href 的 rel="external"标记可以消除 url 中的 #。但我有一些带有自定义插件的博客文章,该插件会呈现我无法使用 rel="external"的注册表单。我想我可以将它用于所有链接,但这会消除平滑过渡。
我可以选择哪些选项来尝试让它发挥作用?我正在尝试将 .submit 绑定(bind)到表单,进行一些验证,然后 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 调用有关。
最佳答案
我不完全确定您在哪里调用 jQuery.ready
函数,但注册处理程序的推荐方法是绑定(bind)到特定页面的 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 处理的所有表单提交中。希望这有帮助!
关于jQuery Mobile 和表单提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4935887/