使用 jQuery 防止 Safari Mobile 中的搜索“发布”行为

Question

我在 jQuery Mobile 网站中使用 <input type="search" /> 文本框。 JQM 为我想保留的这些类型的字段提供了开箱即用的强大功能，但是我遇到了障碍。

不幸的是，我不得不在 ASP.NET WebForms 中创建我的移动站点。因此，我的所有标记都包含在一个 uber form 元素中。

现在，当您在 Mobile Safari 的搜索输入中输入文本时，iPhone/iPad 将在键盘底部显示一个漂亮的“搜索”按钮。这很方便，但是，它似乎对表单执行某种 HTTP 发布（或表单提交）。由于我的表单包含所有内容，因此 JQM 会将我返回到初始登录页面 - 无论我在网站的哪个位置。

现在问题...我想防止这种提交发生并使用 jQuery 替换我自己的一些逻辑。我已经尝试了以下（确实会触发），但是，尽管返回 false 并防止默认，但“发布”或“提交”仍在继续。 如何拦截此事件？

// Prevent form posts
$('form').live('submit', function (e) {

    // Custom logic here

    e.preventDefault(); // <-- fires, but does not prevent JQM from returning to landing page
    return false;
});

Answer 1

尝试将data-ajax="false" 添加到表单标签。听起来 jQuery Mobile 框架仍在劫持submit 事件并运行自己的 AJAX 表单提交。

<form data-ajax="false"...

您还应该停止使用.live()。它从 jQuery 1.7 开始被贬值，如果您使用的是 jQuery 1.6 或更高版本，那么您应该已经在使用 .delegate()。

$('form').live('submit', function (e) {

更改为：

$(document).delegate('form', 'submit', function (e) {

jQuery Mobile 1.0 与 jQuery Core 1.6.4 打包在一起，但如果您迁移到 jQuery Core 1.7 或更高版本，则建议使用 .on() 绑定事件。上面的事件处理程序声明可以使用.on() 来编写，如下所示：

$(document).on('submit', 'form', function (e) {

来源：http://api.jquery.com/on

这是一个演示：http://jsfiddle.net/KAuFz/