jQuery Mobile和表单提交

Question

jQuery Mobile和表单提交

jqueryajaxjquery-mobile

5

我决定使用jQuery Mobile框架来制作一个Wordpress移动主题。

现在我遇到了一个问题，就是在带有哈希标签的URL中提交表单并进行验证和ajax提交时，无法正常工作。

例如：website.com/contact/ <- 正常工作；website.com/#/contact/ <- 不能正常工作。

我知道可以使用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');
        }); 
 });

两者都不能处理 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()。无论我在哪个“页面”，该函数都返回true。我认为这与每个页面的ajax调用有关。

- jdruid

2个回答

2

您可以关闭AJAX包装。请参阅此处：http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html 另外，我看到关于斜杠的问题的一些内容，但现在找不到了，所以请确保使用JQM的alpha3版本。

[编辑]

这之前已经多次提到过-在其他帖子中。如果您访问一个页面并且JQM使用AJAX加载它，则只会获取body，并且不会触发document.ready，因为DOM已经准备好了 ;)（我在这里引用自己）

- naugtur

不确定是否是这样。我将<input type="submit" />更改为<input type="button" />，并添加了一个只有警报的单击处理程序。在URL中使用#不起作用。没有它就可以了。 - jdruid

阅读我的编辑。这与禁用无关。我猜你甚至在错误的地方禁用了它。简而言之：JavaScript 只会在您加载的第一页中起作用。 - naugtur

挺酷的，有点想到了。我打算在一些页面上尝试使用rel="external"，但对于我无法这样做的页面来说有点糟糕。 - jdruid

我已经尝试全局关闭ajax，但完全没有用，它仍然在使用。 - craigp

请注意，此答案是针对alpha3提供的，可能已经不再相关。您能详细描述一下您所做的事情吗？ - naugtur

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zachary Abresch · Accepted Answer

我不确定你在哪里调用你的jQuery.ready函数，但是建议的注册处理程序的方法是绑定到特定页面的pagecreate事件。第一页应该由jQuery.ready处理pagecreate事件。最近我使用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;
        });
    });
});

很遗憾，我没有进行足够的实验来确定是否所有这些都是必要的。我知道这对我有用。我几乎本能地在所有通过AJAX处理的表单提交中添加return false。希望这可以帮到你！