如何迴應「shown.bs.collapse」事件？

Question

我在網上搜索，但不幸的是，沒有爲我工作。

我嘗試了許多不同的方式來響應「shown.bs.collapse」事件，但它從不會觸發。

我試圖通過‘#divi’取代「.collapse」，或改變的情況下從底部到頂部結合的地方，但沒有做到了。

這裏是我當前的代碼：

<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 Bantheswaran的答案：

<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的活動已經深入到該頁面。因爲沒有任何libs會在事件註冊的時候被加載。

$(".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>