web-dev-qa-db-ja.com

jQuery UIの日付ピッカーが動的DOMで壊れるのはなぜですか？

ここでは動的DOMを使用しており、特定のクラス名を持つすべての入力に対してjQuery UI datepickerを呼び出しています。この場合は_.date_です。

最初の静的な構成でうまく動作しますが、それを複製すると、イベントハンドラーが移動したくないようです。 Firebugエラーが発生します。

instは未定義です

JQueryの新しいlive()関数を調べてみましたが、2つを組み合わせることができませんでした。何か案は？

jquery-uidynamic-data
31
Will Morgan

ああ、わかった。 HTMLをDOMに追加した直後に、日付ピッカーをポップアップさせたいすべての入力でこれを実行します。 Datepickerは、アタッチされている要素にクラスを追加するため、既存の入力をフィルターで除外して、新しい入力にのみ適用できます。

$('.date').not('.hasDatePicker').datepicker();

私が何日もグーグルしていて何も見つからなかったので、これが人々の役に立つことを願っています！

これにより、時間を節約できるため、ページ全体ではなくコンテキストとして設定することにより、新しく生成されたHTMLでinput.dateをチェックする方が高速になることにも注意してください。より効率的な操作。

38
Will Morgan

同様の問題がありました。ページに複数のテーブルがあり、それぞれに複数の日付ピッカーがありました。「AddLine」ボタンをクリックすると、動的なHTMLと日付ピッカーを含むテーブル行が追加されました。

何度も検索したところ、入力日付フィールドに「id」が定義されていないことがわかりました。

<input type="text" class="datepicker" name="mDate1" value="" size=8 >

jqueryはすべての日付フィールド値をページで定義された最初の日付フィールドにポイントしていました。カレンダーはすべての日付フィールドでポップアップしましたが、最初の日付フィールドの値は変化しました。次のようにhtmlに変更を加えました

<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >

「id」を追加して機能するようになりました。動的な日付フィールドでは、IDを次のように変更します

var allColumns = $("#"+$tableId+" tr:last td"); 
        $(allColumns).each(function (i,val) {
            if($(val).find(":input").hasClass("datepicker")){
                $(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
            }
        });
6
Richipal

動的DOMで動作させるには、「ライブ」イベントを使用する必要があります。したがって、日付ピッカー入力のクラスが「date-input」の場合、次のコードで機能します。

$(document).ready(function() {
    $('.date-input').live('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});
4
Tommy

これは少し遅いかもしれませんが、上記のすべての提案は私にとってはうまくいきませんでした、私はこれのための簡単な解決策を思いつきました。

まず、問題の原因：JQueryが要素IDに日付ピッカーを割り当てます。要素を複製する場合は、同じIDも複製される可能性があります。どのjQueryが嫌いか。クリックした入力フィールドに関係なく、null参照エラーが発生するか、最初の入力フィールドに日付が割り当てられる可能性があります。

解決：

1）日付ピッカーを破棄する2）すべての入力フィールドに新しい一意のIDを割り当てる3）各入力に日付ピッカーを割り当てる

入力がこのようなものであることを確認してください

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

クローンする前に、日付ピッカーを破壊します

$('.n1datepicker').datepicker('destroy');

クローンを作成したら、これらの行も追加します

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

そして魔法が起こります

4
EGN

使用する

$j(id or class).removeClass('hasDatepicker').datepicker();

それは働いています

3
kishore

JQueryセレクターを使用します。

$(".mydatepicker:not(.hasDatepicker)").datepicker()
2
Quaternion

ページにjquery-uiライブラリの複数のインスタンスがあると、このエラーも発生します。冗長なインスタンスを削除すると私のケースで機能します

1
Anh Nguyen

ここで答えの多くを試した後、これは私にとってうまくいき、最初のクリック/フォーカスに表示されています

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

これには、入力に 'mostrar_calendario'クラスが必要です

liveはJQuery 1.3以降用で、これを「オン」に適合させる必要がある新しいバージョン用です。

違いの詳細はこちら http://api.jquery.com/live/

0
Mauricio Gracia Gutierrez

今日、私は同じ問題に直面しました...私はアプリケーションで datetimepicker プラグインを使用しています。
jqueryのデフォルトの日付ピッカーも使用します。ドキュメントの準備ができて両方を呼び出すと、エラーinst is undefinedが発生します。

    $(document).ready(function(){
        $(".datepickerCustom").datetimepicker();
        $(".datepicker").datepicker();
        $("#MainForm").validationEngine('attach');
        ....
    });

だから私は以下のようにドキュメントの準備ができる前に呼び出すようにコードを変更しました：

    $(".datepickerCustom").datetimepicker();
    $(".datepicker").datepicker();
    $(document).ready(function(){
        $("#MainForm").validationEngine('attach');
        ....
    });

今、すべてがうまく機能しています。問題はありません。

0
vissu

最初の呼び出しの後にデータピッカーが機能しないという同様の問題がありました。私の問題に対する答えがここに見つかりました：

http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/

私はテンプレートからセクションを動的に複製していて、呼び出されたらdatepickerが追加するクラスを誤って含めていました：

hasDatepicker

テンプレートのクローンを作成した後、最初の日付ピッカーを呼び出しました。次に、クローンの各インスタンスの後に日付ピッカー呼び出しを追加しました。

$(source).clone().appendTo(destination).find(".datepicker").datepicker();
0
Vlad

私は同じ症状を経験しました。これは、入力と同じid属性を持つtdを含む要素が原因で発生しました。

 <td id="fld_xyz"><input id="fld_xyz" class="date" /></td>

とにかくこれが理想的ではないことは知っていますが、datepickerコンポーネントがIDの一意性に依存しているように見えることは知っておく価値があります。

0
Stephen Francis

それでも機能しない場合は、クローンが原因です。次のように、datepickerを完全に削除できます。

$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();
0
Octavian Vladu

私はこの問題を抱えていました。私の状況は、日付ピッカーを使用した入力と同じIDを持つ別の要素があることになりました。

0
Scott K