显示页面上所有 Bootstrap 模态框的事件

Question

每当打开 Bootrap 模式时，我都会尝试做一些事情（在本例中是一些统计数据）。

我知道，我可以将这样的事件侦听器添加到模态：

$('#modal-content').on('shown.bs.modal', function() {
   alert('do something');
});

但是有没有办法让页面上的所有模态都有一个监听器？奖励问题：即使是那些被 Javascript?

插入的人

我想过这样的事情：

jQuery('.modal[role="dialog"]').on('show.bs.modal', function() {
   alert('do something');
});

但我希望有更好的方法和方法适用于 Javascript 插入的模式。

Answer 1

这应该可以解决问题——它会在事件冒泡到文档级别时捕获事件，因此应该捕获所有事件：

$(document).on('shown.bs.modal', function() {
   alert('do something');
});

HTH, -泰德

Answer 2

如果您提前知道这些 ID，您可以将它们列出来：

$('#modalOne, #modalTwo').on('shown.bs.modal', function() {
   alert('do something');
});

或者更好的是，如果您以编程方式创建它们以及在 html 中创建它们并且为 id 使用通用前缀，则可以使用以下内容：

$("div[id^='modal']").on('shown.bs.modal', function() {
   alert('do something');
});

Show event for all Bootstrap Modals on the page