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

私はちょうど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> 

そして、それはあまりにも動作しますしません。

Answer 1

同じコードは、ブートストラップバージョン3.3.7で正常に動作します。あなたはどのバージョンのブートストラップを持っていますか？あなたのコードサンプルで

アップデート1

、shown.bs.collapse用リンクイベントがページにまで行かなければなりません。なぜなら、イベント登録時には、どのlibもロードされないからです。

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