jQueryMobileを使用するページ内にフォームがあります。
それはただの古き良き形であり、派手なものは何もありません。
<form action="index.php" method="post">
<input type="text" name="owner" id="owner" />
<button type="submit">Add</button>
</form>
スクリプトブロックに以下を追加した場合(注:$(function(){});を囲むことは、わかりやすくするために省略されています):
$('form').submit(function(event){
// event.preventDefault(); doesn't work here?!?
return false;
});
...フォームは何があっても送信されません。ただし、このアプローチはjQuery Mobileでは使用できません。これは、ページが変更された後、DOMが変更されたときにイベントバインディングが適用されないためです。
したがって、代わりにこのアプローチを試してみると、次のようになります。
$(document).on('submit', 'form', function(event){
// event.preventDefault(); doesn't work here as well...
alert('submit!');
return false;
});
...フォームはfalseを返しますが、送信されます(ボタンがクリックされるとアラートが表示されます)。
ここで何が起こっているのか、そして期待される動作を得る方法は?