JavaScriptにて、動的に追加したフォームにjquery UI datepickerを使ってカレンダーを表示させたい

実現したいこと

ユーザーが『追加ボタン』を押すと追加されるフォームに『jquery UI datepicker』を使ってカレンダーを表示したい。

困っていること

あらかじめ作っておいたフォームには問題なくカレンダーが表示されるものの、ユーザーが追加したフォームに対しては
カレンダーが表示されない。
ググってみたところ、

$('.date').not('.hasDatePicker').datepicker();
$('.date').removeClass('hasDatepicker').datepicker();

このいずれかを指定すればよい、との情報を得て試してみるものの動かず…

ソースコード

HTML

HTML
1<form method="post" action="confirm.php">
2  <div class="form-group new-form">
3      <label>フォーム</label>　<input type="button" value="+追加" class="add-form"> <input type="button" value="ーすべて削除" class="remove-form">
4      <br>
5      <input type="text" name="organizer" class="form-control">
6  </div>
7</form>
8

JavaScript
1$(function() {
2  $(".datepicker").datepicker();
3});
4
5$(function() {
6  $(".add-form").click(function() {
7    if ($(".new-form").children().length < 13) {
8      $(".new-form").append('<input type="select" class="datepicker form-control plus" style="margin-bottom: 16px;">');
9    }
10  });
11});

このソースコードで、あらかじめこちらで用意しておいたフォームには問題なくカレンダーが表示されます。
しかし、ユーザーがボタンで後から追加したフォームにはカレンダーが表示されません。
後から追加されたフォームに対してもカレンダーが表示されるようにしたいです。
ご回答お待ちしています。
よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

それだと現時点で表示されている <input> にしか適用されないため、クリックで <input> を追加した後に、追加した <input> に対して datepicker() を適用しなければなりません。

javascript
1$(function() {
2  $(".add-form").click(function() {
3    if ($(".new-form").children().length < 13) {
4      /* <input> を生成して変数に保存 */
5      var $input = $('<input type="select" class="datepicker form-control plus" style="margin-bottom: 16px;">');
6
7      /* 作った <input> をフォームに追加 */
8      $(".new-form").append($input);
9
10      /* datepicker() 適用 */
11      $input.datepicker();
12    }
13  });
14});