0

以下の jQuery コードを使用して動的入力フィールド (複数) を生成しています。時間ピッカーと日付ピッカーが含まれていますが、機能しません。

$('#add_another_event').click(function() 
    {
        var $address = $('#sub_events');
        var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original
        var newNum = new Number(num + 1);
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        //set all div id's and the input id's
        newElem.children('div').each (function (i) {
            this.id = 'input' + (newNum*5 + i);
        });

        newElem.find('input').each (function () {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }


        $('#btnDel').removeAttr('disabled');              

    });

これらは私が複製したフィールドです

<p><label>Art Space </label>
<input id="as_name" name="as_name" class="txt-input small" type="text">
<input id="as_id" name="as_id" class="txt-input small" type="hidden"></p>
<p><label>Start Date </label>
<input id="start_date" name="start_date" class="datepicker txt-input small" type="text"></p>
<p><label>End Date </label>
<input id="end_date" name="end_date" class="datepicker txt-input small" type="text"></p>
<p><label>Opening Hours </label>
From : <input style="width: 100px" id="time_from" name="time_from" class="timepicker txt-input small" type="text">
To : <input style="width: 100px" id="time_to" name="time_to" class="timepicker txt-input small" type="text">
</p>

時間ピッカーと日付ピッカー

  $('.timepicker').timepicker({
        hourGrid: 4,
        minuteGrid: 10,
        timeFormat: 'hh:mm tt'
    });

    $('.datepicker').datepicker();

私の問題は、フィールドが複製されているときにピッカーが表示されないことです。

jQueryで試してみまし.live()たが、うまくいきません。私は jQuery の専門家ではありません。

ここに例がありますhttp://jsfiddle.net/MkhZ2/17/

4

2 に答える 2

3

新しい要素の日付/時刻ピッカーを再初期化し、UI ウィジェットによって追加されたクラスをクリアする必要があります。

$('.datepicker', newElem).removeClass('hasDatepicker').datepicker()

この場合、ドキュメント全体を検索しないように、新しいコレクションをコンテキストとして提供します。

これは、クローン作成とテンプレート作成の落とし穴の 1 つを示しています。テンプレートを使用して新しいフォームを生成した場合、新しいフォームでのウィジェットの構築方法に影響を与えるデータやクラスをコピーするリスクはありません。あなたの場合、hasDatepickerUI によって適用され、入力時に新しい日付ピッカーが初期化されないようにするクラスを削除する必要があります。datepicker('destroy')ただし、新しいノードには実際には日付ピッカーがないため、クリーンアップ メソッドも使用できません。そのため、手動でクリーンアップを行う必要があります。

于 2013-02-24T13:22:43.597 に答える
0

呼び出す必要があります

$('target_selector').datepicker();

動的に追加された要素ごとに。

于 2013-02-24T13:21:40.463 に答える