jQuery 时间选取器未加载动态文本字段

jQuery timepicker not loading for dynamic text fields

本文关键字：动态 文本 字段 加载 时间 选取 jQuery      更新时间：2023-09-26

我有一个表单，它首先加载文本字段并与之关联的时间选择器。用户还可以单击"更多"按钮，该按钮会在下方动态加载额外的文本字段。这也有一个与之关联的时间选取器，但它不会加载到动态字段上。我正在使用Trent Richardson的jQuery时间选择器插件 http://trentrichardson.com/examples/timepicker

我还找到了以前的答案（https://stackoverflow.com/questions/18666634/jquery-timepicker-don't-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>&nbsp;</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 后，您需要应用时间选择器函数：

$(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;
});
相关文章：