获取关闭模态的元素

Posted 2023-05-08

【中文标题】获取关闭模态的元素

【英文标题】：Get the element that closed the modal

【发布时间】：2017-04-18 16:14:02

【问题描述】：

在我的 html 中，我的一个模态中有这个：

<a href="#" class="clicker" data-dismiss="modal">Click</a>

如果单击此元素，它将隐藏模式。

但是，我希望能够在 jQuery 中获取关闭模式的元素，例如：

$('#myModal').on('hidden.bs.modal', function(event)

    var invoker = $(event.relatedTarget);
);

但这不起作用。 relatedTarget 似乎只适用于 show.bs.modal 和 shown.bs.modal (as per the documentation)。

那么我怎样才能在hidden.bs.modal 事件中获取导致模式关闭的元素？

【问题讨论】：

event.target 中没有吗？

我创建了一个代码笔来测试@AllanStepps 解决方案，但 event.target 指向整个模式，而不是点击的元素。

event.currentTarget 呢？ （= 附加了事件侦听器的节​​点。）developer.mozilla.org/en-US/docs/Web/Events/click

相同的结果@AllanStepps。正如您在我的回答中看到的那样，我设法通过其他方式实现了目标。

【参考方案1】：

I have made a Pen to show how to achieve the desired result。正如您在此示例中所见，Bootstrap 产生的事件不共享用于关闭模式的确切元素。他们将整个模态元素本身称为.target 和.currentTarget。

所以，为了获取被点击关闭模式的元素，我使用了 jQuery 选择器功能。像这样：

$("[data-dismiss='modal']").click(function() 
  $("#data-dismiss").html('#'+ $(this).attr('id'));
);

在这种情况下，jQuery 正在搜索每个具有属性 data-dismiss 和值 modal 的元素，并为找到的元素附加一个回调函数，当它们被单击时执行。

正如您在我制作的示例中看到的那样，有两个具有此属性的按钮。模态标题中的一个：

<button id="header-close-button" type="button"
        class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

模态页脚中的另一个：

<button id="footer-close-button" type="button"
        class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">Close</span>
</button>

这两个按钮都有不同的 ID，我设置了这些 ID 以表明您可以通过附加到单击事件的回调函数上的 $(this).attr('id') 来检查哪个按钮被点击了。