如何应对"shown.bs.collapse“事件？

Question

我在网上搜索，但不幸的是，没有什么对我有用。

我尝试了许多不同的方法来响应"shown.bs.collapse“事件，但它从未触发过。

我尝试将".collapse“替换为"#divi"，或者将事件绑定的位置从底部更改到顶部，但没有做到这一点。

以下是我的当前代码：

<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
  Masqued
</div>
<script>
$(".collapse").on("shown.bs.collapse", function() {
  alert("test");
});
</script>

我刚刚编写了一个新的简单html文件，感谢Jaganathan的回答：

<script>
$(".collapse").on("shown.bs.collapse", function() {
  alert("test");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
  Masqued
</div>

它也不起作用。

Answer 1

同样的代码也适用于引导版本3.3.7。您在哪个版本的引导程序？

更新1

在您的代码示例中，shown.bs.collapse的事件链接必须下降到页面。因为没有一个库会在事件注册时加载。

​

$(".collapse").on("shown.bs.collapse", function() {
  alert("test");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
  Masqued
</div>

​