1

ページの読み込み後に複数の追加フィールドを追加できるフィールドがあります (履歴書の教育と職歴のフィールドを考えてください)。私はこれを使用しています。

最初のフィールドに日付ピッカーを追加できますが、元の複製/本質的な複製であるにもかかわらず、その後に追加されたフィールドは日付ピッカーにアクセスしません。日付ピッカーは、ページの読み込み時またはページ上の 1 つのクラスに対してのみ初期化されると思います。

したがって、ページで日付ピッカーを初期化します。

$('.input-append.date').datepicker();

このクラスによってカプセル化されたフォーム コードのブロック。最初のページ読み込みはOK。また、エラーが発生し、ページが以前に入力した複数のフィールドをリロードした場合も OK です (エラーで返されたすべてのフィールドの日付ピッカーがあります)。ただし、フォームに新しいフィールドを追加する別の js 関数では、追加の新しいフィールドは日付ピッカーにアクセスできません。これを行う方法がわかりません。おそらく、より多くの経験/知恵を持つ人がヒントを提供してくれます。

編集：

簡単です：私は単に追加しました：

 $('.input-append.date').datepicker();

新しいフィールドを呼び出すコードに。私が知らない最適な解決策については、js を専門とする人なら誰でもコメントできます。また、検索用語を拡大すると、他にも多くの同様の質問が見つかりました。しかし、私が今やっていることは今の私にとっては十分です。

4

1 に答える 1

0

その場で追加される要素には、data-provide="datepicker" 属性を使用します。遅延初期化されます。たとえば、入力フィールドが ajax レスポンスで表示され、コンテナ div にロードされた場合。したがって、この場合：

<input type="text" data-provide="datepicker" />

したがって、このajax応答をロードするときは、cotainer divのように

$('#container-div').html(ajax_response);

これは機能します。

同様に、jquery を使用して要素を作成し、それをコンテナーに追加する場合 (これはあなたのケースで発生していると思います)、たとえば、テキスト ボックスを作成してコンテナー div に追加する関数があり、この関数が呼び出されます。いくつかの要素のクリックイベントで、それがボタンだとしましょう。ここでも data-provide 属性がこの問題の解決策です。例えば

function createTextBox(){
    var t = $('<input>').attr('data-provide','datepicker');
    $('#container-div').append(t);
}

そして、この関数は、次のようにいくつかのボタンのクリックイベントで呼び出されます:

$(document).ready(function(){
      $('#someBtn).click(createTextBox);
});

つまり、その動的要素が文字列として ajax 応答に含まれているか、 jquery を介して作成されているかに関係なく、 data-provide属性を使用してブートストラップの日付ピッカーを設定するだけです。この場合、datepicker は Bootstrap 方式で遅延して初期化されるためです。

于 2014-09-12T14:01:04.777 に答える