2017-09-28 38 views
1

ブートストラップのモーダルは正常に表示されますが、何らかの理由でshow.bs.modalイベントが発生しません。ここでモーダルが表示されますが、show.bs.modalは起動しません。

は私のモーダルマークアップです:

<div class="modal" tabindex="-1" id="email-modal"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"> 
        <span>&times;</span> 
       </button> 
       <h4 class="modal-title"></h4> 
      </div> 
      <div class="modal-body"> 
       <p>hi</p> 
      </div> 
     </div> 
    </div> 
</div> 

、ここでは私はJavaScriptである:

$('#email-modal').on('show-bs-modal', function (event) { 

     alert('hello, world!'); 

}); 
$('#email-modal').modal(); 

fiddler

答えて

1

それは、単純なタイプミスです:FROM

ショー-BS -modal TO:恥ずかしいshow.bs.modal

$('#email-modal').on('show.bs.modal', function (event) { 
 

 
    console.log('hello, world!'); 
 

 
}); 
 
$('#email-modal').modal();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="modal" tabindex="-1" id="email-modal"> 
 
    <div class="modal-dialog modal-sm"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal"> 
 
        <span>&times;</span> 
 
       </button> 
 
       <h4 class="modal-title"></h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>hi</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

+0

.. –

+1

@IsaacKleinman番より、30年前、私が代わりに手紙O.のゼロ**パスカル**手順に書きましたすべての大学は狂った.....私を助けるために.... – gaetanoM

+1

:Dは素晴らしいです! –

関連する問題