jquery uiモーダルボックス内のフォームが隠された後、Keypressがもう呼び出されない

Question

フォームを含むjquery UIモーダルボックスがあります。

Enterキーが押されたことを処理するkeypressイベントが宣言されました。 モーダルボックスに含まれるフォームを非表示にすると、keypressイベントはもはや呼び出されません。

この動作は、ここに再現されていますhttps://jsfiddle.net/patrick29/jqp4wp77/

$('.dialog').on('keypress', function(e) { 
    if (e.keyCode == $.ui.keyCode.ENTER) { 
     submit(); 
    } 
}); 
function submit() { 
    alert('ok'); 
    $('.dialog form').hide(); 
} 

初めて入力しますが、私はOKメッセージを受け取る押されます。その後、フォームが隠され、2回目のEnterが押されました。私はもうokメッセージを受信しません。

私はフォームを非表示にしても、キー入力イベントの作業を行う理由とその理由を知っていますか？

ありがとうございます！

Answer 1

これは、.hide（）の代わりに次のようにすることができます。

$('.dialog form').css({ 
    opacity: 0 
}); 

https://jsfiddle.net/nr5fptd2/1/

Answer 2

コンテナにキー押しハンドラを持たせるには、入力のようなキーボードのやりとりをサポートする要素を内部に持つ必要があります。 .dialog div内の要素は、フォームを非表示にするとサポートしません。詳細はこちらhttp://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

たとえば、送信機能に$('.dialog').append('<input/>');を追加すると、イベントが機能します。もちろん、私はそれをお勧めしません。