e.preventDefaultは、モーダルテキストを変更した後にモーダルを開くときには機能しません。モーダルは内容を変更せずに開いています

Question

モーダルトリガーボタンをクリックしたときにモーダルボディのテキストを変更しようとしています。しかし、モーダルはオープンですが、モーダル・ボディ・テキストは変化しません。 これは

<button type="button" class="btn btn-info open-modal" data-remote="false" data-toggle="modal" data-target="#myModal">Register</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

そして、デフォルトのイベントを防止するためのソースモーダルためのコードである

$('.open-modal').click(function(e) 
{ 
    e.preventDefault(); 
    alert('hello i am jquery'); 
    $('#myModal').modal('show'); 
}); 

なぜ警告（ 'こんにちは、私はjqueryの午前'）;行は実行されていませんか？プログラムで表示するようにモーダルをトリガするために

Answer 1

このあなたのボタンが次の属性で開くためにターゲットモーダルを指定しているので、jqueryよりもHTMLが優先されるときに発生する可能性があります。

data-remote="false" data-toggle="modal" data-target="#myModal" 

それらを削除してjQueryの罰金になります

$('.open-modal').click(function(e) 
 
{ 
 
    e.preventDefault(); 
 
    alert('hello i am jquery'); 
 
    $('#myModal').modal('show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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 type="button" class="btn btn-info open-modal" >Register</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Modal Header</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Some text in the modal.</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div>

Answer 2

は、次のように使用することができます。

$('#myModal').modal('show'); 

また、イベント・ハンドラがトリガされていて、そこにコードを追加することができます。

$('#myModal').on('shown', function() { 
    alert('hello i am jquery'); 
})