ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryで作成された要素にDatepickerを動的に適用する方法?

jQueryで作成された要素にDatepickerを動的に適用する方法?

DDD
DDDオリジナル
2024-10-20 20:43:30926ブラウズ

How to Dynamically Apply Datepickers to Created Elements in jQuery?

作成された要素への Datepicker の動的適用

jQuery では、動的に作成された要素に datepicker() 関数を適用しようとすると問題が発生することがあります。要素。すべての要素に共通のクラスを割り当てているにもかかわらず、最初の要素に対してのみ機能する可能性があります。

問題:

日付ピッカー カレンダーを必要とするテキストボックスを動的に作成しました。クリックすると表示されます。次のコードを使用すると、

$(".datepicker_recurring_start" ).datepicker();

最初のテキストボックスのみにカレンダーが表示されます。

解決策:

この問題を解決するには、次のアプローチ:

$('body').on('focus', ".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

説明:

このコードは、jQuery の委任イベントを利用します。フォーカス イベントのボディ全体 (body 要素) にリスナーを追加します。 datepicker_quirting_start クラスの要素がフォーカスを取得すると、インライン関数が実行されます。次に、この関数は、イベントをトリガーした要素専用に datepicker() 関数を初期化します。

この手法を使用すると、ユーザー操作時にアクティブになる datepicker 機能を備えた要素を動的に作成できます。詳細については、委任イベントに関する jQuery ドキュメント (http://api.jquery.com/on/) を参照してください。

以上がjQueryで作成された要素にDatepickerを動的に適用する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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