2011-12-20 10 views
1

jQuery Mobileサイトでは、<input type="search" />テキストボックスを使用しています。 JQMは、これらのタイプのフィールドのためにすぐにすぐに使える優れた機能を提供しますが、私は問題にぶつかりました。jQueryを使用したSafari Mobileの検索 '投稿'動作の防止

ASP.NET Webフォーム内に自分のモバイルサイトを作成する必要があるという不幸な制約があります。結果的に、私のマークアップはすべて、1つのuber form要素にラップされます。

モバイルサファリの検索入力にテキストを入力すると、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; 
}); 

答えて

1

formタグにdata-ajax="false"を追加してみてください。 jQuery Mobile Frameworkがまだ​​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のモバイル1.0は、jQueryのコア1.6.4でパッケージがありますが.on()その後、jQueryのコア1.7以上に移動した場合は、イベントをバインドするために提案された方法です。上記のイベントハンドラの宣言は、このような.on()を使って書くことができます。

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

出典:http://api.jquery.com/on

ここではデモです:http://jsfiddle.net/KAuFz/

+0

感謝の男! 「ライブ」、「デリゲート」、「オン」に関するヒントのような魅力と感謝のように働いた –

+0

ようこそ。私はこのjQuery Mobileの注意点を前に扱ってきました。:) – Jasper

関連する問題