ホームページ > 記事 > ウェブフロントエンド > jQuery または jQuery UI を使用して動的に作成された入力フィールドで日付ピッカーを有効にする方法
動的に作成された要素に日付ピッカーをアタッチする - JQuery/JQueryUI
問題の説明:
An次のコードを使用してテキストボックスを動的に作成し、クリックごとに日付ピッカーを有効にしようとすると、最初のテキストボックスのみが日付ピッカーを受け取ります。
$(".datepicker_recurring_start" ).datepicker();
解決策:
動的に作成されたすべての要素で日付ピッカーを有効にするには、以下に示すように、コードで jQuery の on() メソッドを使用したイベント委任を使用する必要があります。
$('body').on('focus',".datepicker_recurring_start", function(){ $(this).datepicker(); });
説明:
on() メソッドは、動的に作成されたすべてのテキストボックスの親である body 要素にイベント リスナーを追加します。 datepicker_quirting_start クラスがフォーカスされている場合 (たとえば、ユーザーがそのクラスの入力フィールドをクリックした場合)、datepicker() メソッドがフォーカスされた要素に適用されます。
このアプローチでは、イベントの委任が使用され、イベントの添付が可能になります。 DOM に対して動的に追加または削除される要素のリスナー。この場合、body 要素はイベント リスナー ターゲットとして使用され、datepicker_quirting_start クラス セレクターは、フォーカスされたときに datepicker をトリガーする特定の要素を識別するために使用されます。
以上がjQuery または jQuery UI を使用して動的に作成された入力フィールドで日付ピッカーを有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。