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

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.");
    };
});

我需要能够检查删除文件模式关闭时是否单击了删除按钮。我的 javascript 代码中是否还缺少其他内容？

Answer 1

选项 #1

在hidden.bs.modal 事件监听器中，event.target 指的是被隐藏的模态元素，不是触发事件的点击元素。

如果您想确定哪个按钮触发模态关闭，一种选择是将事件侦听器添加到模态内的按钮元素。然后在按钮事件侦听器内部，您可以侦听父 #modal 元素上的 hidden.bs.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 属性。

因此，您可以通过访问模态显示事件侦听器内部的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 来查看页面上的哪个元素具有焦点。

在下面的 sn-p 中，事件侦听器附加到模式元素以用于显示和隐藏事件。触发事件时，会检查当前关注的元素是否具有[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

扩展@Jos​​hCrozier 的回答：

如果他们有一个与 hide.bs.modal/hidden.bs.modal 事件相关联的属性，那就太好了。在撰写本文时，目前还没有

---

这将模拟类似的行为，将单击的按钮附加为相关的目标，供以后的听众使用：

$( '.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 3

这也有效：

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

除非您 id，否则它不会获得模态框上“X”的 id。将返回触发模态关闭的元素的 id....

Answer 4

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

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

然后我将这个解决方案写到 mix @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 显示 （嵌入引导功能）：： p>

 $('#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 class 和 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;
});

Answer 6

已编辑：我在这里没有看到的与 BOOTSTRAP 4+ 配合良好的解决方案，可以适用于其他版本，包括 v5。如果需要，可能对某人有用。

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal">Valider</button>
</div>

$('#prompt_modal').on('shown.bs.modal', function (event) {
    let buttons = this.querySelectorAll('.btn'); // or others selectors
    buttons.forEach(btn => {
        btn.onclick = () => {
            console.log(btn);
            // do something with btn (textCOntent, dataset, classlist, others) 
            // to detect clicked...
        }
    })
})