当bootstrap模式关闭时,如何知道单击了哪个按钮？

Question

这是我的模态html代码:

<div class="modal fade" id="delete-file-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" method="post" id="delete_file_form">

                <div class="modal-body">
                    Are you sure you want to delete this file?  
                </div>  

                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-danger" name="in_confirm_insert" id="confirm-delete-button">Delete</button>
                    <button data-dismiss="modal" class="btn btn-default" name="in_confirm_insert" id="cancel-delete-button">Cancel</button>
                </div>

            </form>
        </div>
    </div>
</div>

这是我的javascript代码:

$('#delete-file-modal').on('hidden.bs.modal', function (e) {

    var delete_button = $(e.target).is("#confirm-delete-button");

    if(delete_button === true) {
        //delete file
        alert("file deleted.");
    } else {
        alert("delete failed.");
    };
});

我需要能够在delete-file-modal关闭时检查是否单击了删除按钮.我的javascript代码中是否还有其他内容？

Answer 1

选项1

在hidden.bs.modal事件侦听器中,event.target引用隐藏的模态元素,而不是触发事件的单击元素.

如果要确定触发模式关闭的按​​钮,则一个选项是将事件侦听器添加到模式内的按钮元素.然后在按钮事件侦听器内部,您可以侦听hidden.bs.modal父#modal元素上的事件,以确定模式是否已关闭.由于hidden.bs.modal事件侦听器位于按钮事件侦听器内部,因此click您仍然可以引用触发该click事件的元素.

这里的例子

$('#delete-file-modal .modal-footer button').on('click', function(event) {
  var $button = $(event.target); // The clicked button

  $(this).closest('.modal').one('hidden.bs.modal', function() {
    // Fire if the button element 
    console.log('The button that closed the modal is: ', $button);
  });
});

还值得一提的是,该.one()方法只会在每次附加时触发事件(这正是我们想要的).否则,如果您使用.on()或.click()附加事件,则事件可能会多次触发,因为每次click触发事件侦听器时都会重新附加事件.

选项#2

根据相关的Bootstrap文档,show.bs.modal/ shown.bs.modalevents具有relatedTarget附加到事件的属性.

如果由单击引起,则单击的元素可用作relatedTarget事件的属性.

因此,您可以通过访问event.relatedTarget模态show事件侦听器内部来确定触发模式打开事件的元素:

这里的例子

$('#delete-file-modal').on('show.bs.modal', function (event) {
    console.log(event.relatedTarget);
});

请记住,该relatedTarget属性仅与模态显示事件相关联.如果他们拥有与hide.bs.modal/ hidden.bs.modalevents 相关的属性,那就太好了.在写这篇文章时,目前还没有.

选项#3

正如Andrew 在下面的评论中指出的那样,您还可以通过访问来查看页面上哪个元素具有焦点document.activeElement.

在下面的代码段中,事件侦听器附加到show和hide事件的模式元素.当事件被触发时,进行检查以查看当前关注的元素是否具有[data-toggle]或[data-dismiss]属性(这意味着它确实触发了事件).

这里的例子

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);

  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    console.log($activeElement);
  }
});

如果您正在收听显示/隐藏事件(如上例中所示),并且您想要区分事件,则可以检查event.type:

这里的例子

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);

  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    if (event.type === 'hide') {
      // Do something with the button that closed the modal
      console.log('The button that closed the modal is: ', $activeElement);
    }

    if (event.type === 'show') {
      // Do something with the button that opened the modal
      console.log('The button that opened the modal is: ', $activeElement);
    }
  }
});

Answer 2

这也适用：

$('#myModal').on('hide.bs.modal', function (e) { 
var tmpid = $(document.activeElement).attr('id'); alert(tmpid); 
}); 

除非您对其进行标识，否则它不会在模态上获取“ X”的ID。将返回触发模态关闭的元素的ID。