如何在 bootstrap 对话框中正确触发默认操作?
How to properly trigger default action on a bootstrap dialog?
SO 上的大部分答案要么是关于如何激活模式对话框,要么是关于解雇的工作原理。
但是我发现缺少的是如何触发默认按钮表示的操作。
例如,
此对话框的默认操作是 'Save'。
这是 html 标记
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Dialog</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-save" class="btn btn-primary btn-save">Save</button>
</div>
</div>
</div>
</div>
如果我调用$('#myModal).modal('show')
,会出现对话框。
如果我点击右上角的叉号或 'Close' 按钮,对话框将按预期关闭。
但是,当我按下 'Save' 时,没有任何反应。
我是用迂回的方式实现的:
它是用 coffeescript 编写的。
$('#myModal).on('click', _.bind(@_handleSave, @))
$('#myModal).modal('show')
然后里面 _handleSave
,
_handleSaveProfile: (data) ->
return unless data.target.id is 'btn-save'
# Do saving
# ...
我不认为这是正确的方式,因为它拦截了每个点击事件。
实现这个功能的正确方法是什么?
将点击事件绑定到按钮而不是模态:
$('#myModal').modal('show')
$('#btn-save').on('click', _.bind(@_handleSave, @))
SO 上的大部分答案要么是关于如何激活模式对话框,要么是关于解雇的工作原理。
但是我发现缺少的是如何触发默认按钮表示的操作。
例如,
此对话框的默认操作是 'Save'。
这是 html 标记
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Dialog</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-save" class="btn btn-primary btn-save">Save</button>
</div>
</div>
</div>
</div>
如果我调用$('#myModal).modal('show')
,会出现对话框。
如果我点击右上角的叉号或 'Close' 按钮,对话框将按预期关闭。
但是,当我按下 'Save' 时,没有任何反应。
我是用迂回的方式实现的:
它是用 coffeescript 编写的。
$('#myModal).on('click', _.bind(@_handleSave, @))
$('#myModal).modal('show')
然后里面 _handleSave
,
_handleSaveProfile: (data) ->
return unless data.target.id is 'btn-save'
# Do saving
# ...
我不认为这是正确的方式,因为它拦截了每个点击事件。
实现这个功能的正确方法是什么?
将点击事件绑定到按钮而不是模态:
$('#myModal').modal('show')
$('#btn-save').on('click', _.bind(@_handleSave, @))