【jQuery / Datepicker / clone】 datepickerをコピーして日付選択する方法

いつもお世話になっております。
早速本題に入らせていただきます。

jQueryとbootstrapのDatepickerを使用して、日付欄を複製後、日付入力を試みているのですが
項目追加をすると日付選択した行ではなく、一番上の要素に日付が入力されてしまいます。

以下事象とコードになります。

【１．追加前】

【２．ボタン押下で日付欄追加後日付選択（3番目を選択）】

【３．日付が登録されるのが一番上の欄になってしまう】

【使用ライブラリ】
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js

html
1<html>
2  <head>
3  </head>
4  
5  <body>
6    <div class="copy-parent">
7      <div class="copy-child">
8        <input type="text" class="form-control date" style="width:200px; margin-left:20px; margin-top:20px;">
9      </div>
10    </div>
11    <button type="button" id="btn">追加</button>
12  </body>
13</html>

javaScript
1$(function(){
2  $('.date').datepicker({
3        format: "yyyy年mm月dd日",
4        autoclose: true,
5    });
6});
7
8$('button').on('click',function(){
9  // コピー
10  var cloneContents =  $(".copy-parent").find(".copy-child:first").clone(true);
11  
12  // 追加
13  cloneContents.appendTo(".copy-parent");
14});

お時間ある方で解決方法御存知の方いらっしゃいましたらご助力頂けますと幸いです。

追記

コメント頂いた通り以下のように追記してみましたが、focusがコピー元？になっており事象は変わりませんでした。

javaScript
1$(function(){
2  $('.date').datepicker();
3});
4
5$('button').on('click',function(){
6  // コピー
7  var cloneContents =  $(".copy-parent").find(".copy-child:first").clone(true);
8  
9  // 追加
10  cloneContents.appendTo(".copy-parent");
11  
12  $('.date').datepicker({
13    format: "yyyy年mm月dd日",
14    autoclose: true,
15  });
16});

ただ、以下のようにhtmlをべた書きして追加すると、想定通りの動作になりました。
htmlをべた書きするしかないでしょうか？

javaScript
1$(function(){
2  $('.date').datepicker();
3});
4
5$('button').on('click',function(){
6  // コピー★cloneするのではなくhtmlべた書き
7  var html = '<div class="copy-child"><input type="text" class="form-control date" style="width:200px; margin-left:20px; margin-top:20px;"</div>';
8  
9  // 追加
10  $(".copy-parent").append(html);
11  $(".copy-child:last").find('.date').removeClass('hasDatepicker').datepicker();
12});

【↑のようにすると、追加した要素で日付選択可能になった】

回答を受けての最終形

html
1<html>
2  <head>
3  </head>
4  
5  <body>
6    <div class="copy-parent">
7      <div class="copy-child">
8        <input type="text" class="form-control date" style="width:200px; margin-left:20px; margin-top:20px;">
9      </div>
10    </div>
11    <button type="button" id="btn">追加</button>
12  </body>
13</html>

javaScript
1$(function(){
2  $('.date').datepicker();
3});
4
5$('button').on('click',function(){
6  // コピー (cloneはfalseにする）
7  var cloneContents = $(".copy-parent").find(".copy-child:first").clone(false);
8
9  // 追加
10  cloneContents.appendTo(".copy-parent");
11
12  // イベントを再追加
13  $('.date').datepicker({
14      format: "yyyy年mm月dd日",
15      autoclose: true,
16  });
17});

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

回答2件

ベストアンサー

動的に作られた要素なので、新たに生成された要素自体にdatepickerのイベントが有効になっていないのではと思います。
cloneしたことで機能の対象が最初の要素のままになっているように思います。

cloneしたあとにもdatepickerを呼び出して、生成した要素自身にあたるようにしてください。

投稿2022/03/08 09:46

編集2022/03/08 10:35

m.ts10806

総合スコア80850

pekopekoapricot

2022/03/08 09:56

追加要素をクリックしたときにもDatepickerは反応するのでイベントは付与されていると思うのですが・・・ clone(true)ですし・・・・

m.ts10806

2022/03/08 10:01

失礼、イベントではなくあくまで[datepickerの機能が]と解釈してください。提示の通りfocusイベントは引き継がれますが、その対象先要素が最初に表示されている要素であるため、提示の現象になっているのだと思います。ひとまずappendしたあとにもう1回下記を入れてください。 $('.date').datepicker({ format: "yyyy年mm月dd日", autoclose: true, });

pekopekoapricot

2022/03/08 10:41

質問に追記させていただきました。 datepickerを追記しただけでは対象が最初の要素のまま変わりませんでした。ですがhtmlをべた書きで追加すると、日付選択できるようになりました。 cloneではなくhtmlべた書きするしかないでしょうか？

m.ts10806

2022/03/08 11:27

clone(true) ↓ clone() で動作すると思います。（手元で確認済み）

m.ts10806

2022/03/08 11:27

$('button').on('click',function(){ // コピー var cloneContents = $(".copy-parent").find(".copy-child:first").clone(); // 追加 cloneContents.appendTo(".copy-parent"); $('.date').datepicker({ format: "yyyy年mm月dd日", autoclose: true, }); });

pekopekoapricot

2022/03/08 15:55

ありがとうございます！！！！無事動作するようになりました！！ BAとさせていただきます！

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

以下でどうでしょうか？

JavaScript
1$(function(){
2  let option = {
3    format: "yyyy年mm月dd日",
4    autoclose: true
5  };
6  $('.date').datepicker(option);
7  $('button').on('click',function(){
8    let cloneContents = $(".copy-parent").find(".copy-child:first").clone(false); // cloneの引数はfalse
9    cloneContents.appendTo(".copy-parent");
10    cloneContents.find(".date").datepicker(option);
11  });
12});