質問: ### 実現したいこと ユーザーが『追加ボタン』を押すと追加されるフォームに『jquery UI datepicker』を使ってカレンダーを表示したい。 ### 困っていること あらかじめ作っておいたフォームには問題なくカレンダーが表示されるものの、ユーザーが追加したフォームに対しては カレンダーが表示されない。 ググってみたところ、 ``` $('.date').not('.hasDatePicker').datepicker(); $('.date').removeClass('hasDatepicker').datepicker(); ``` このいずれかを指定すればよい、との情報を得て試してみるものの動かず... ### ソースコード **HTML** ``` フォーム ``` ``` $(function() { $(".datepicker").datepicker(); }); $(function() { $(".add-form").click(function() { if ($(".new-form").children().length < 13) { $(".new-form").append(''); } }); }); ``` このソースコードで、あらかじめこちらで用意しておいたフォームには問題なくカレンダーが表示されます。 しかし、ユーザーがボタンで後から追加したフォームにはカレンダーが表示されません。 後から追加されたフォームに対してもカレンダーが表示されるようにしたいです。 ご回答お待ちしています。 よろしくお願い致します。
回答: それだと現時点で表示されている `` にしか適用されないため、クリックで `` を追加した後に、追加した `` に対して `datepicker()` を適用しなければなりません。 ``` $(function() { $(".add-form").click(function() { if ($(".new-form").children().length < 13) { /* を生成して変数に保存 */ var $input = $(''); /* 作った をフォームに追加 */ $(".new-form").append($input); /* datepicker() 適用 */ $input.datepicker(); } }); }); ```