我有一个表单,它首先加载文本字段并有一个与之关联的时间选择器。 用户还可以单击“更多”按钮,该按钮会动态加载下面的额外文本字段。这还有一个与之关联的时间选择器,但它不会加载到动态字段上。 我正在使用 Trent Richardson 的 jQuery 时间选择器插件 http://trentrichardson.com/examples/timepicker
我还找到了以前的答案( https://stackoverflow.com/questions/18666634/jquery-timepicker-doesnt-work-on-dynamic-input ),但这并不能解决我的问题。
这是表格;第一个 div 是动态加载的:
<div class="row">
<a href="#more" rel="[{$day}]" id="addhour_{$outlet}_{$day}" class="btn-more add-hours-link">Add More+</a>
<div class="sample" style="display: none;">
<label> </label>
<input type="text" class="outlet-hour from timepicker2" name="from[{$day}][]" />
<span>to</span>
<input type="text" class="outlet-hour to timepicker2" name="to[{$day}][]" />
</div>
<div>
<label for="from_{$outlet}_{$day}">{$name}</label>
<input id="from_{$outlet}_{$day}" class="outlet-hour from timepicker" type="text" name="from[{$day}][]" />
<span>to</span>
<input id="to_{$outlet}_{$day}" type="text" class="outlet-hour to timepicker" name="to[{$day}][]" />
</div>
这是主要字段的 JS(工作正常):
$('.timepicker').timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
这是添加额外字段的 JS:
$(document).on('click', 'a.add-hours-link', function(event, hour){
var from = !!hour ? hour.from : '';
var to = !!hour ? hour.to : '';
$('.timepicker2').removeClass('hasDatepicker');
$('.timepicker2').each(function(){
$(this).timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
});
$(this).parent().find('.sample')
.clone()
.removeClass('sample')
.appendTo($(this).parent())
.find('.from').val(from).end()
.find('.to').val(to).end()
.fadeIn('fast');
return false;
});
目前,我已将该类重命名为 timePicker2 并删除了 hasDatepicker 类,如之前的答案中所述。
任何想法表示赞赏。 谢谢
最佳答案
添加到 DOM 后,您需要应用 timepicker 函数:
$(document).on('click', 'a.add-hours-link', function(event, hour){
var from = !!hour ? hour.from : '';
var to = !!hour ? hour.to : '';
$(this).parent().find('.sample')
.clone()
.removeClass('sample')
.appendTo($(this).parent())
.find('.from').val(from).end()
.find('.to').val(to).end()
.fadeIn('fast');
$('.timepicker2').removeClass('hasDatepicker');
$('.timepicker2').each(function(){
$(this).timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
});
return false;
});
关于javascript - jQuery 时间选择器未加载动态文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19979560/