在注入元素上激活引導日期選取器

Question

我在加載頁面後向輸入字段添加模態。它應該被綁定到日期選擇器，如下所示。

$('.#example1').datepicker({ 
       format: "dd/mm/yyyy" 
      }); 

這不起作用。如果我在頁面和輸入可見後在chrome控制檯中運行此代碼，則不會出現問題。我通常會改變代碼注入的元素上進行如下....

$(document).on("click","#example1", function() { .... 

，但不知道如何使用日期選取器我已經試過

 $('.modal-body .#example1').datepicker({ 
       format: "dd/mm/yyyy" 
      }); 

和

$('document .#example1').datepicker({ 
       format: "dd/mm/yyyy" 
      }); 

做

Answer 1

我認爲你需要確保日期選擇器在將<input>字段添加到模式對話框後進行初始化。也許這個例子可能有幫助。

function injectDatePicker() { 
 
    var input = $('<input />'); 
 
    input.datepicker({ 
 
    format: "dd/mm/yyyy" 
 
    }); 
 
    
 
    $('#mountPoint').append(input); 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script> 
 

 

 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<button class="btn btn-default" onclick="injectDatePicker()">Inject Date Picker</button> 
 

 
<div id="myModal" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Modal</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div id="mountPoint"></div> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->