jQuery 按下回车键时，Bootstrap 3 模式关闭，但未提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24958558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 modal is closed when enter is pressed, but form is not submitted
提问by Ionic? Biz?u
I have the following Twitter Bootstrap 3 modal, with a form inside of the modal:
我有以下 Twitter Bootstrap 3 模态，模态内有一个表单：
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title">Add new page</h2>
</div>
<div class="modal-body">
<form class="form-horizontal add-new-page-form">
<fieldset>
<!-- Label -->
<div class="form-group">
<label class="col-md-4 control-label" for="labelInput">Label</label>
<div class="col-md-5">
<input id="labelInput" name="labelInput" type="text" data-field="label" class="form-control input-md">
<span class="help-block">Page label</span>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="closeBtn"></label>
<div class="col-md-8">
<button id="closeBtn" name="closeBtn" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="saveBtn" name="saveBtn" class="btn btn-primary add-page" value="Add">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
I want to catch the submitevent via jQuery:
我想submit通过 jQuery捕捉事件：
$("form").on("submit", function () {
alert("foo");
return false;
});
The form is not submitted via pressing Enterkey (when an text input is focused), but it is submitted when Addbutton (that is a submitone) is clicked.
表单不是通过按键提交Enter（当文本输入被聚焦时），而是在Add按钮（即submit一个）被点击时提交。
I cannot find why the form is not submitted via Enter. The modal simply closes, but submitevent is not emitted/fired.
我找不到为什么不通过 Enter 提交表单。模态只是关闭，但submit不会发出/触发事件。
JSFDDLE- where the issue can be reproduced
JSFDDLE- 可以重现问题的地方
Tested on Chromium Version 34.0.1847.116 Ubuntu 14.04 aura (260972) and Firefox 31.0. Same issue on both browsers.
在 Chromium 版本 34.0.1847.116 Ubuntu 14.04 aura (260972) 和 Firefox 31.0 上测试。两个浏览器都存在同样的问题。
回答by john Smith
you can simply change the order from
你可以简单地改变顺序
close-button
submit-button
to
到
submit-button
close-button
or add
或添加
type="button"
to your close button so it doesn′t get interpreted as submit button
到您的关闭按钮，因此它不会被解释为提交按钮
cheers
干杯
回答by bearoplane
I've added a handler to the modal close event to submit the form before closing the modal, like so:
我已经向模态关闭事件添加了一个处理程序，以在关闭模态之前提交表单，如下所示：
$("#myModal").on("hide.bs.modal", function () {
$(this).find('form').submit();
});
I've updated the jsfiddle correspondingly, http://jsfiddle.net/yAzrs/2/
我已经相应地更新了 jsfiddle，http://jsfiddle.net/yAzrs/2/
You could also listen for the enter key within the form itself, something like this:
您还可以在表单本身中监听回车键，如下所示：
$('form').on("keypress", function (e) {
if (e.which == 13) $(this).submit();
});
回答by Andrew Matthew
have you tried using
你有没有试过使用
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
jQuery doesn't know you've pressed enter just simply by you pressing enter. Include the jQuery above but with your own code inside the if statement and hopefully it should work
jQuery 不知道您按回车键只是简单地按回车键。包括上面的 jQuery，但在 if 语句中使用您自己的代码，希望它应该可以工作
回答by neno
Pressing enter in the input field caused button with data-dismiss="modal" to be fired just change data-dismiss="modal" to your submit button and remove from your close button
在输入字段中按 Enter 会触发带有 data-dismiss="modal" 的按钮，只需将 data-dismiss="modal" 更改为您的提交按钮并从关闭按钮中删除
<input type="submit" id="saveBtn" name="saveBtn" class="btn btn-primary add-page" data-dismiss="modal" value="Add">
