2

最初にテキスト フィールドを読み込み、タイム ピッカーが関連付けられたフォームがあります。ユーザーは、[その他] ボタンをクリックすることもできます。これにより、その下に追加のテキスト フィールドが動的に読み込まれます。これにはタイム ピッカーも関連付けられていますが、動的フィールドには読み込まれません。Trent Richardson による jQuery timepicker アドオンを使用しています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 クラスを削除しています。

どんなアイデアでも大歓迎です。ありがとう

4

1 に答える 1

2

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;
});
于 2013-11-14T14:31:21.840 に答える