Jquery 动态创建文本框的时间选择器

Question

我需要为我正在使用的动态创建的文本框设置时间选择器jquery时间选择器插件

下面是我的代码，我试过它不起作用

<script src="https://www.jqueryscript.net/demo/Time-Selection-Popover-jQuery-Timepicker/dist/js/timepicker.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Time-Selection-Popover-jQuery-Timepicker/dist/css/timepicker.css">

动态HTML表格

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 0; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment


        $(wrapper).append('<fieldset><div class="form-group"><label class="col-sm-1 control-label">Period</label><div class="col-md-1"><input type="checkbox" class="" id="break_id'+x+'" onclick="setbreak('+x+')" name="is_break" value="1">Break </div><div class="col-sm-2 "><input type="text" class="form-control" onclick="get_timepick('+x+')" id="from_time['+x+']" name="from_time[]" id="from_time'+x+'"  placeholder="From Time" required></div><div class="col-sm-2"><input type="text" class="form-control timepicker" name="to_time['+x+']" id="to_time['+x+']"  placeholder="To time"></div><div class="col-sm-2"><select id="subject_id'+x+'" name="subject_id['+x+']" class="subject_id selectpicker"></select></div><div class="col-sm-2"><select id="teacher_id'+x+'" name="teacher_id['+x+']" class="teacher_id selectpicker"></select></div></div><a href="#" class="remove_field">Remove</a></fieldset>'); //add input box
        $('#from_time'+x+'').timepicker();
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('fieldset').remove(); x--;
})

});

我试过这样的脚本

function get_timepick(sel){  
   $(document).ready(function () {
     $('#from_time'+sel+'').timepicker();
   });
 }

我在控制台出现以下错误 未捕获类型错误：无法读取未定义的属性 'nodeName'

提前致谢

Answer 1

删除了 get_timepick() 中的重复文档就绪事件。

删除了起始日期字段的重复 id 属性。

您的代码如下：

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 0; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment


        $(wrapper).append('<fieldset><div class="form-group"><label class="col-sm-1 control-label">Period</label><div class="col-md-1"><input type="checkbox" class="" id="break_id'+x+'" onclick="setbreak('+x+')" name="is_break" value="1">Break </div><div class="col-sm-2 "><input type="text" class="form-control" onclick="get_timepick('+x+')" name="from_time[]" id="from_time'+x+'"  placeholder="From Time" required></div><div class="col-sm-2"><input type="text" class="form-control timepicker" name="to_time['+x+']" id="to_time'+x+'"  placeholder="To time"></div><div class="col-sm-2"><select id="subject_id'+x+'" name="subject_id['+x+']" class="subject_id selectpicker"></select></div><div class="col-sm-2"><select id="teacher_id'+x+'" name="teacher_id['+x+']" class="teacher_id selectpicker"></select></div></div><a href="#" class="remove_field">Remove</a></fieldset>'); //add input box
        $('#from_time'+x+'').timepicker();
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('fieldset').remove(); x--;
    })


function get_timepick(sel){  
     $('#from_time'+sel+'').timepicker();
 }

Jquery 动态创建文本框的时间选择器

Jquery Timepicker for Dynamic created textbox

jquery

timepicker