如何在引导对话框上正确触发默认操作?

时间:2016-11-30 07:14:28

标签: javascript twitter-bootstrap coffeescript modal-dialog

关于SO的大部分答案都是关于如何激活模态对话框或解雇如何工作。

然而,我发现缺少的是如何触发默认按钮表示的操作。

例如,

enter image description here

此对话框的默认操作是“保存”。

这是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">&times;</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'),则会出现对话框。

如果我点击右上角的十字形或“关闭”按钮,对话框将按预期被解除。

然而,当我按下“保存”时,没有任何反应。

我使用了一种循环方式来实现它:

用coffeescript写的。

$('#myModal).on('click', _.bind(@_handleSave, @))
$('#myModal).modal('show')

然后在_handleSave内,

_handleSaveProfile: (data) ->

  return unless data.target.id is 'btn-save'
  # Do saving
  # ...

我不认为这是正确的方式,因为它拦截了每一次点击事件。

实现此功能的适当方法是什么?

1 个答案:

答案 0 :(得分:1)

将click事件绑定到按钮而不是模态:

$('#myModal').modal('show')
$('#btn-save').on('click', _.bind(@_handleSave, @))