twitter-bootstrap 在引导模式中确定和取消
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42116392/
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
OK and Cancel in a bootstrap modal
提问by Paul
I would like to implement a classic OK and Cancel concept in a bootstrap modal.
我想在引导模式中实现经典的 OK 和 Cancel 概念。
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
user can select an option here from a list
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
In the model content, there is a and the user can select one of the options. If OK is clicked, I would like to handle the new option. If not, no action is required. For that I hook on the hide.bs.modal event, but that is called when Cancel is clicked.
在模型内容中，有一个，用户可以选择其中一个选项。如果单击确定，我想处理新选项。如果不是，则不需要任何操作。为此，我挂上了 hide.bs.modal 事件，但在单击 Cancel 时会调用该事件。
How can I differentiate between Cancel and OK buttons?
如何区分“取消”和“确定”按钮？
回答by Piyush
Well, Bootstrap does not support specific modal events for the modal actions buttons. So, I believe you will have to handle the events yourself like so.
好吧，Bootstrap 不支持模态操作按钮的特定模态事件。所以，我相信你必须像这样自己处理这些事件。
$("#myModal").on("click","btn-default", function(){
// code
});
$("#myModal").on("click","btn-primary", function(){
// code
});
回答by Valour
You can simply add an click event to OK button? If you do not add e.preventDefault()to your event you can process normally.
您可以简单地向“确定”按钮添加单击事件？如果您不添加e.preventDefault()到您的活动中，您可以正常处理。
First add your OK button a definitive ID or class name:
首先为你的 OK 按钮添加一个明确的 ID 或类名：
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
user can select an option here from a list
<select name="select" id="select1">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="btn_ok_1" class="btn btn-primary">OK</button>
</div>
</div>
</div>
Then add a click event to that button:
然后向该按钮添加一个点击事件：
$("#btn_ok_1").click(function (e) {
var selectedOption = $('select#select1 option:selected').val;
// Do some work with selected item.
})
