如何知道启动模式关闭时哪个按钮被点击？ [英] How do I know which button is clicked when the bootstrap modal closes?

问题描述

 < div class =modal fadeid =delete-file-模态角色=对话框> 
< div class =modal-dialog> 
< div class =modal-content> 
< form class =form-horizo​​ntalmethod =postid =delete_file_form> 
 
< div class =modal-body> 
您确定要删除此文件吗？ 
< / div> 
 
< div class =modal-footer> 
< button data-dismiss =modalclass =btn btn-dangername =in_confirm_insertid =confirm-delete-button>删除< / button> 
< button data-dismiss =modalclass =btn btn-defaultname =in_confirm_insertid =cancel-delete-button>取消< / button> 
< / div> 
 
< / form> 
< / div> 
< / div> 
< / div> 
  

以下是我的javascript代码：

<$ （'hidden.bs.modal'，函数（e）{

var delete_button = $（'＃delete $ file-mode'） e.target）.is（＃confirm-delete-button）;

if（delete_button === true）{
//删除文件
alert（file已删除。）;
} else {
alert（delete failed。）;
};
}）;

我需要检查删除文件模式时是否单击删除按钮关闭。在我的javascript代码中是否还有其他东西没有丢失？

解决方案

选项＃1

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

如果您想确定哪个按钮触发了模式关闭，一个选项是添加事件监听器的模式内的按钮元素。然后在按钮事件侦听器的内部，您可以侦听父元素 #modal 元素上的 hidden.bs.modal 事件以确定模态是否关闭。由于 hidden.bs.modal 事件侦听器位于按钮中，请单击事件侦听器，因此您仍然可以参考触发点击事件的元素。

示例Here

  $（'＃delete （'click'，function（event）{
 var $ button = $（event.target）; //被点击的按钮
 
 $（this）.closest（'。modal'）。one（'hidden.bs.modal'，function（）{
 //如果按钮元素为
 console.log（'The button关闭模式是：'，$ button）; 
}）; 
}）; 
  

值得一提的是 .one（）方法只会在每次连接时触发一次事件（这正是我们想要的） 。否则，如果您使用 .on（）或 .click（）来附加事件，则事件可能会触发多次，因为每次点击点击事件侦听器时都会重新附加它。

---

选项＃2

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

如果由于点击而导致点击元素可用于事件的 relatedTarget 属性。

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

此处示例

$ （'show.bs.modal'，function（event）{
console.log（$'$'pre'$'code> $（'＃delete-file-modal' event.relatedTarget）;
}）;

请记住， relatedTarget 属性是只与模态节目相关。如果他们拥有与 hide.bs.modal / hidden.bs.modal 活动。在撰写本文时，目前不是。



---

选项＃3

正如Andrew指出中的--bootstrap-modal-closes / 28270395？noredirect = 1＃comment71408704_28270395>> /developer.mozilla.org/en-US/docs/Web/API/Document/activeElementrel =noreferrer> document.activeElement 。 p>

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

示例Here

  $（'＃delete （'hide.bs.modal show.bs.modal'，function（event）{
 var $ activeElement = $（document.activeElement）; 
 
 if（$ activeElement.is（'[data-toggle]，[data-dismiss]'））{
 console.log（$ activeElement）; 
} 
}）; 
  

如果您正在收听显示/隐藏事件，如上例所示，并且您希望区分事件，你可以检查 event.type ：

示例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'）{
 // （关闭模式的按钮是：'，$ activeElement）; 
} 
 
 if（event.type ==='show'）{
 //使用打开模式
的按钮做一些操作console.log（'打开模式的按钮是：'，$ activeElement）; 
 } 
} 
}）; 
  

Here is my modal html code:

<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>

and here is my javascript code:

$('#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.");
    };
});

I need to be able to check if the delete button is clicked when the delete-file-modal is closed. Is there something else missing in my javascript code?

解决方案

Option #1

Within the hidden.bs.modal event listener, event.target refers to the modal element that is hidden, not the clicked element that triggered the event.

If you want to determine which button triggered the modal to close, one option is to add event listeners to the button elements inside of the modal. Then inside of the button event listener you could listen to the hidden.bs.modal event on the parent #modal element in order to determine if the modal was closed. Since the hidden.bs.modal event listener is inside of the button click event listener, you still have a reference to the element that triggered the click event.

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

It's also worth mentioning that the .one() method will only fire the event once each time it is attached (which is exactly what we want). Otherwise, if you used .on() or .click() to attach the event, then the event could fire multiple times since it is reattached each time the click event listener is fired.

---

Option #2

According to the relevant Bootstrap documentation, the show.bs.modal/shown.bs.modal events have a relatedTarget property attached to the event.

If caused by a click, the clicked element is available as the relatedTarget property of the event.

Thus, you can determine the element that triggered the modal to open event by accessing event.relatedTarget inside of the modal show event listener:

Example Here

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

Keep in mind that the relatedTarget property is only associated with the modal show events. It would be nice if they had a property like that associated with the hide.bs.modal/hidden.bs.modal events. As of writing this, there currently isn't.

---

Option #3

As Andrew pointed out in the comments below this answer, you can also check to see which element on the page has focus by accessing document.activeElement.

In the snippet below, an event listener is attached to the modal element for the show and hide events. When the event is triggered, a check is made to see if the currently focused on element has a [data-toggle] or [data-dismiss] attribute (which implies that it did in fact trigger the event).

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

If you are listening to both show/hide events, like in the example above, and you want to differentiate between the events, you could check 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);
    }
  }
});

这篇关于如何知道启动模式关闭时哪个按钮被点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！