Wie reagiert man auf das Ereignis "show.bs.collapse"?

Question

Ich suche im Internet, aber leider funktioniert nichts für mich.

Ich habe viele verschiedene Möglichkeiten versucht, auf das "show.bs.collapse" -Ereignis zu reagieren, aber es wird nie ausgelöst.

Ich versuchte durch Ersetzen von ".collapse" durch "#divi" oder durch Ändern der Position der Ereignisbindung von unten nach oben, aber nichts tat es.

Hier ist mein aktueller Code:

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

Ich schrieb eine neue einfache HTML-Datei durch die Antwort von 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> 

Und es funktioniert auch nicht.

Answer 1

Derselbe Code funktioniert gut mit der Bootstrap-Version 3.3.7. In welcher Bootstrap-Version bist du?

Update 1

In Ihrem Codebeispiel Das Ereignis für shown.bs.collapse Verknüpfung hat bis auf die Seite zu gelangen. Weil zu diesem Zeitpunkt der Ereignisregistrierung keine der Bibliotheken geladen wurde.

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