javascript - Bootstrap 时间选择器不适用于单击按钮时生成的动态文本框

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>

当我尝试通过单击按钮加载此时间选择器时，遇到“方法未定义”之类的错误，请帮助我解决此问题。

 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>

希望这会有所帮助