Question

在页面加载中加载timepicker时没有问题，

<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>

希望这会有所帮助

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

Bootstrap timepicker无法处理按钮单击时生成的动态文本框

3 个答案: