起動後にブートストラップドロップダウン機能を起動できない

Question

ブートストラップメニューを開いたときに警告を出すようにコードを設定しましたが、警告を発するのに苦労しています。

$('.dropdown.data-api').on('shown.bs.dropdown', function() { 
 
    alert('it worked!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<div class="dropdown"> 
 
    \t 
 
    <span data-toggle="dropdown">Click me</span> 
 

 
    <ul class="dropdown-menu"> 
 
     <li>Hello World! 
 
    </ul> 
 
    \t 
 
</div>

Answer 1

イベントセレクタは両方dropdownとdata-apiクラスとドロップダウンを探しています。イベントセレクタから.data-apiを削除するか、data-apiをドロップダウンリストのリストに追加します。

$('.dropdown.data-api').on('shown.bs.dropdown', function() { 
 
    alert('it worked!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="dropdown data-api"> 
 
    \t 
 
    <span data-toggle="dropdown">Click me</span> 
 

 
    <ul class="dropdown-menu"> 
 
     <li>Hello World! 
 
    </ul> 
 
    \t 
 
</div>