ブートストラップモーダルjqueryが機能しません

Question

私のモーダルに問題があります。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

ボタン：

<button type="button" class="btn btn-primary" data-toggle="modal" 
data-target="#mdProduction">production</button> 

モーダル：

jqueryの：

$('#mdProduction').on('hidden.bs.modal', function() { 
alert("Hello World!"); 
}) 

しかし、私はすべてのアラートを得ることはありません。 私も "wi​​ndow.alert"を試しましたが、どちらもうまくいきません。

これは単なる例です。 私が望むのは、モーダルが隠されたときに関数をトリガーすることです。

ご回答ありがとうございます。

Answer 1

：

$('#mdProduction').on('hidden.bs.modal', function() { 
 
    alert("Hello World!"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 

 
<div class="modal fade" id="mdProduction" role="dialog"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <p>This is a small modal.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#mdProduction">Open Small Modal</button>

私は問題はダイアログを開いている道から来ていると思います。ダイアログを開く場所でコードを共有できますか？

Answer 2

あなたのHTMLは間違っています。それは次のようになります。あなたが使用しているイベントがうまく機能している

<div id="mdProduction" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      some information 
     </div> 
    </div> 
</div>