jQuery timepicker не загружается для динамических текстовых полей

Question

У меня есть форма, которая сначала загружает текстовые поля и ассоциируется с ним. Пользователь также может нажать кнопку «Дополнительно», которая динамически загружает дополнительные текстовые поля под ним. У этого также есть связанный с ним сборщик времени, однако он не будет загружаться в динамические поля. Я использую timepicker аддон 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>&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, упомянутых в предыдущем ответе.

Любые идеи оценили. Благодаря

Answer 1

Вы должны применить timepicker функцию после того, как вы добавили к 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; 
});