ブートストラップは、コンテナ流体

Question

に置かれたとき、私はdinamically追加されたボタンをクリックすると、モーダルを表示しようとして働いていない、モーダル：

$(document).ready(function(){ 
    $('#rent-php').on('click', '.bike-rent-btn', function(){ 
     $('#confirm-rent-modal').modal('show'); 
    }); 
}); 

PHP経由dinamically追加されたボタンは次のようになります。

<button type="button" class="btn btn-primary btn-md bike-rent-btn" data-toggle="modal" data-target="#confirm-rent-modal">Rent</button> 

これは、htmlコード、W3から貼り付けかなりのコピーである。また、そこ

<div class="modal fade modal-sm" id="confirm-rent-modal" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
     <p></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

</div>   
</div> 

また、容器の流体のためのいくつかのカスタムスタイルです：このコードはcontainer-fluid bootsrap divの中の場所である場合には

height: 100vh; 
margin: 0; 
padding: 30px; 
background-color: #EEEEEE; 

、何も起こりません。私がそれを外に置くと（bodyタグ）、モーダルが表示されますが、消えます。しかし、少なくとも何かが起こる。

Answer 1

私のために働く？私が何かを逃しているかどうか教えてください。

依存関係のバージョンに問題がある可能性がありますか？

$(document).ready(function(){ 
 
    $('#rent-php').on('click', '.bike-rent-btn', function(){ 
 
     $('#confirm-rent-modal').modal('show'); 
 
    }); 
 
});

.container-fluid{ 
 
    height: 100vh; 
 
    margin: 0; 
 
    padding: 30px; 
 
    background-color: #EEEEEE; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<div class="container-fluid"> 
 
    <button type="button" class="btn btn-primary btn-md bike-rent-btn" data-toggle="modal" data-target="#confirm-rent-modal">Rent</button> 
 

 
    <div class="modal fade modal-sm" id="confirm-rent-modal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
        <h4 class="modal-title"></h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <p></p> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div>   
 
    </div> 
 
</div>