Bootstrap timepicker無法在單擊按鈕時生成的動態文本框中使用

Question

將時間選擇器加載到頁面加載中時沒有問題，

<script src="~/Contents/js/bootstrap-timepicker.min.js"></script>

 <div class="bootstrap-timepicker">
     <input id="FlightArrivalTimepicker0" name="" type="text" class="form-control iconnn-time-new time1">
           </div>
        <script>  $('#FlightArrivalTimepicker0').timepicker();</script>

當我嘗試在按鈕click中加載此時間選擇器時，遇到諸如“方法未定義”之類的錯誤，請幫助我解決此問題。

 var arrivalId = "#FlightArrivalTimepicker2";
 var newItem = ('<div class="col-sm-3 col-md-3"> <label class="control-label">Arrival </label> <div class="bootstrap-timepicker"> <input id="FlightArrivalTimepicker2" name="" type="text" class="form-control iconnn-time-new time1">   <script> $(' + arrivalId + ').timepicker();<\/script> </div></div>');
                $("#FlightDetails").append(newItem);

Answer 1

請修改代碼

var arrivalId = "#FlightArrivalTimepicker2";
var newItem = ('<div class="col-sm-3 col-md-3"> <label class="control-label">Arrival </label> <div class="bootstrap-timepicker"> <input id="FlightArrivalTimepicker2" name="" type="text" class="form-control iconnn-time-new time1">   <script> $(' + arrivalId + ').timepicker();<\/script> </div></div>');
            $("#FlightDetails").append(newItem);

至

var newItem = ('<div class="col-sm-3 col-md-3"> <label class="control-label">Arrival </label> <div class="bootstrap-timepicker"> <input id="FlightArrivalTimepicker2" name="" type="text" class="form-control iconnn-time-new time1 show-timepicker"></div></div>');
$(newItem).appendTo("#FlightArrivalTimepicker2");

和

<script>  $('#FlightArrivalTimepicker0').timepicker();</script>

至

<script>  $('.show-timepicker').timepicker();</script>

希望這會有所幫助

Answer 2

不要在newItem定義中包含腳本標簽。 將其添加到dom后，將其移出並執行呼叫

var arrivalId = "#FlightArrivalTimepicker2";
     var newItem = ('<div class="col-sm-3 col-md-3"> <label class="control-label">Arrival </label> <div class="bootstrap-timepicker"> <input id="FlightArrivalTimepicker2" name="" type="text" class="form-control iconnn-time-new time1"></div></div>');
                    $("#FlightDetails").append(newItem);
    $(arrivalId).timepicker(); //don't put this inline - and DON'T QUOTE your variable!!

這是一個有效的小提琴的鏈接： http : //jsfiddle.net/bmartinelle/4drtbqnc/

Answer 3

var arrivalId = "#FlightArrivalTimepicker2";
var newItem = ('<div class="col-sm-3 col-md-3"> <label class="control-label">Arrival </label> <div class="bootstrap-timepicker"> <input id="'+arrivalId+'" name="" type="text" class="form-control iconnn-time-new time1"></div></div>');
$("#FlightDetails").append(newItem);
$(' + arrivalId + ').timepicker(); // init timepicker