Twitter BootstrapのModalダイアログ内のフォームをエンターキーでSubmitする方法
以下の様なソートのためのModalダイアログをTwitter Bootstrapを用いて作成しています。
<div class="modal fade" id="sort_form_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" data-keyboard="true">
<div class="modal-content">
<form accept-charset="UTF-8" action="/" method="get">
<div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">ソート</h4>
</div>
<div class="modal-body">
<span>ソート条件</span>
<div class="btn-group" role="group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="direction" value="asc" checked>昇順
</label>
<label class="btn btn-primary ">
<input type="radio" name="direction" value="desc">降順
</label>
<div>
<select class="form-control" name="sort">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<input class="btn btn-primary" name="commit" type="submit" value="ソートする">
</div>
</form>
</div>
</div>
</div>
そしてエンターキーでSubmitとESCキーでModalを消すために以下のjQuery
を使っています。
$('#sort_form_modal').modal({
keyboard: true;
});
$('#sort_form_modal').on( 'keypress', function( e ) {
if( e.keyCode === 13 ) {
e.preventDefault();
$( this ).trigger( 'submit' );
}
});
これだとセレクトボックスの値を変えた後にエンターキーでSubmitが押されるのですが、Modalが開いた直後やもしくは昇順・降順を選択しただけではエンターキーを押しても何の反応もありません。
どうすればModalを開いた直後からエンターキーの入力を受け取ってSubmitを送るようにできるのでしょうか?