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事件的元素。

Example Here

$('#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() method只会在每次附加时触发事件（这正是我们想要的）。否则，如果您使用.on()或.click()附加事件，则事件可能会多次触发，因为每次触发click事件侦听器时都会重新挂起该事件。

选项＃2

根据相关Bootstrap documentation，show.bs.modal / shown.bs.modal个事件附加了relatedTarget个属性。

如果由点击引起，则点击的元素可用作事件的relatedTarget属性。

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

Example Here

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

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

选项＃3

正如Andrew在此答案下面指出in the comments，您还可以通过访问document.activeElement来查看页面上哪个元素具有焦点。

在下面的代码段中，事件侦听器附加到show和hide事件的模式元素。触发事件时，会检查当前关注的元素是否具有[data-toggle]或[data-dismiss]属性（这意味着它确实触发了事件）。

Example Here

$('#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：

Example Here

$('#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

这也有效：

const messages = await getChatroomMessages(chatroom.id);

它不会得到＆＃39; X＆＃39;在模态上，除非你认出它。将返回触发模态关闭的元素的id ....

Answer 3

延长@JoshCrozier的答案：

如果他们拥有与hide.bs.modal / hidden.bs.modal事件相关的属性，那就太好了。在写这篇文章时，目前还没有

这将模拟一个类似的行为，将点击的按钮作为relatedTarget附加到以后的侦听器中：

$( '.modal-footer .btn[data-dismiss="modal"]' ).on( 'click', function() {
    var target = this

    $( target ).closest( '.modal' )
        .one( 'hide.bs.modal hidden.bs.modal', function( event ) {
            event.relatedTarget = target
        } )
} )

可以根据项目中模态的使用方式进一步优化选择器和侦听器。例如：如果您知道自己不会使用hide.bs.modal，则可以改为修改hidden.bs.modal的事件。

Answer 4

@JoshCrozier 答案很好且有用，但有时我们需要确定女巫元素触发模态在关闭后打开/关闭。（ @Nomad 在 @JoshCrozier 答案下面的评论中提到了这一点。

有些时候我们需要确定body或header中的哪个链接或按钮触发要关闭的模式（而不仅仅是footer中的按钮）。

然后我将此解决方案写入混合 @JoshCrozier 和 @Katia 以我的方式回答并改进最终解决方案：

将此部分添加到您网页的脚本中：

$('body').on('click','.modal .dismiss-modal', function() {
    var closeRelatedTarget = this;
    var $modal = $(closeRelatedTarget).closest('.modal');
    $modal.one('hide.bs.modal hidden.bs.modal', function(event) {
        $modal.data('closeRelatedTarget',closeRelatedTarget);
    });
    $modal.data('closeRelatedTarget','wait');
    $modal.modal('hide');
});
$('body').on('show.bs.modal','.modal', function(event){
    $(this).data('closeRelatedTarget','anElement');
    $(this).data('showRelatedTarget',event.relatedTarget);
});

现在可以使用简单的事件处理程序轻松使用它或获取目标元素：

●确定女巫元素触发了show和shown 上的模式 show （嵌入式Bootstrap功能）：

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

和

$('#MyModal').on('shown.bs.modal', function (event) { console.log(event.relatedTarget); });

●确定女巫元素触发了hidden上 关闭的模式

$('#BuyModal').on('hidden.bs.modal', function (event) { if($(this).data('closeRelatedTarget')=='wait') {return;} console.log($('#MyModal').data('closeRelatedTarget')); });

●即使在模态关闭后，确定女巫元素触发模态显示

console.log($('#MyModal').data('showRelatedTarget'));

●即使在模态关闭后，确定女巫元素触发模态关闭

console.log($('#MyModal').data('closeRelatedTarget'));


注意：而不是data-dismiss="modal"属性使用我的modal-dismiss类到模型中的每个元素，您可以关闭模型并且您想要确定它（不要使用同时modal-dismiss类和data-dismiss="modal"。

示例： <a href="/more_info.html" class="dismiss-modal">More info</a>

为什么？因为data-dismiss="modal"关闭模型并在设置closeRelatedTarget之前触发隐藏和隐藏。

Answer 5

我们正在考虑这个问题。就像标准按钮处理程序一样简单。 data-dismiss =“ modal”将使该对话框消失，并且我们仍然知道单击了我们感兴趣的按钮。

$('#delete-file-modal').on('click','#delete-file-modal #confirm-delete-button', function (e) {
  e.preventDefault();
  console.log('confirmed delete');
  return false;
});

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

5 个答案:

选项＃1

选项＃2

选项＃3

将此部分添加到您网页的脚本中：

现在可以使用简单的事件处理程序轻松使用它或获取目标元素：