如何回应" shown.bs.collapse"事件?

时间:2016-10-10 12:07:33

标签: javascript jquery html css twitter-bootstrap-3

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

我尝试了许多不同的方式来回应" shown.bs.collapse"事件,但它永远不会发生。

我试过替换" .collapse" by" #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>

由于Jaganathan Bantheswaran的回答,我刚写了一个新的简单html文件:

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

它也不起作用。

1 个答案:

答案 0 :(得分:1)

相同的代码与引导版本3.3.7一起正常工作。你在哪个版本的bootstrap?

更新1

在您的代码示例中,shown.bs.collapse的事件链接必须转到该页面。因为在事件注册的那个时候不会加载任何库。

&#13;
&#13;
$(".collapse").on("shown.bs.collapse", function() {
  alert("test");
});
&#13;
<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>
&#13;
&#13;
&#13;