在页面上显示所有Bootstrap Modals的事件

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

请参阅this bootply

HTH， -Ted

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