Question

我有一个包含表单的jquery UI模式框。

我声明了按键事件以处理按下Enter键。如果我隐藏模态框中包含的表单，则不再调用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();
}

首次按Enter键我收到确认消息。然后表单被隐藏，第二次按Enter键我不再收到ok消息了。

你知道我为什么以及如何隐藏表格并仍然有按键事件工作？

谢谢！

Answer 1

要在容器上使用按键处理程序，您需要在内部支持键盘交互的元素，例如输入。一旦隐藏表单，.dialog div中的任何元素都不支持。更多信息请访问：http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

例如，在提交功能中添加$('.dialog').append('<input/>');将使事件有效。当然，我不推荐它。

Answer 2

你可以做这样的事情而不是.hide（）;

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

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

在jquery ui模式框内隐藏后，不再调用Keypress

2 个答案: