ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery または jQuery UI を使用して動的に作成された入力フィールドで日付ピッカーを有効にする方法

jQuery または jQuery UI を使用して動的に作成された入力フィールドで日付ピッカーを有効にする方法

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-20 20:43:02278ブラウズ

How to Enable Datepickers on Dynamically Created Input Fields Using jQuery or 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。