質問編集履歴

4

2022/03/08 15:53

投稿

pekopekoapricot
pekopekoapricot

スコア24

test CHANGED
File without changes
test CHANGED
@@ -112,3 +112,43 @@
112
112
 
113
113
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-08/ebd0804c-b37e-4973-8ef1-f8d939b92e10.png)
114
114
 
115
+
116
+ ---
117
+
118
+ ### 回答を受けての最終形
119
+
120
+ ```html
121
+ <html>
122
+ <head>
123
+ </head>
124
+
125
+ <body>
126
+ <div class="copy-parent">
127
+ <div class="copy-child">
128
+ <input type="text" class="form-control date" style="width:200px; margin-left:20px; margin-top:20px;">
129
+ </div>
130
+ </div>
131
+ <button type="button" id="btn">追加</button>
132
+ </body>
133
+ </html>
134
+ ```
135
+
136
+ ```javaScript
137
+ $(function(){
138
+ $('.date').datepicker();
139
+ });
140
+
141
+ $('button').on('click',function(){
142
+ // コピー (cloneはfalseにする)
143
+ var cloneContents = $(".copy-parent").find(".copy-child:first").clone(false);
144
+
145
+ // 追加
146
+ cloneContents.appendTo(".copy-parent");
147
+
148
+ // イベントを再追加
149
+ $('.date').datepicker({
150
+ format: "yyyy年mm月dd日",
151
+ autoclose: true,
152
+ });
153
+ });
154
+ ```

3

2022/03/08 10:42

投稿

pekopekoapricot
pekopekoapricot

スコア24

test CHANGED
File without changes
test CHANGED
@@ -72,6 +72,10 @@
72
72
  コメント頂いた通り以下のように追記してみましたが、focusがコピー元?になっており事象は変わりませんでした。
73
73
 
74
74
  ```javaScript
75
+ $(function(){
76
+ $('.date').datepicker();
77
+ });
78
+
75
79
  $('button').on('click',function(){
76
80
  // コピー
77
81
  var cloneContents = $(".copy-parent").find(".copy-child:first").clone(true);

2

2022/03/08 10:40

投稿

pekopekoapricot
pekopekoapricot

スコア24

test CHANGED
File without changes
test CHANGED
@@ -104,4 +104,7 @@
104
104
  });
105
105
  ```
106
106
 
107
+ 【↑のようにすると、追加した要素で日付選択可能になった】
107
108
 
109
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-08/ebd0804c-b37e-4973-8ef1-f8d939b92e10.png)
110
+

1

2022/03/08 10:39

投稿

pekopekoapricot
pekopekoapricot

スコア24

test CHANGED
File without changes
test CHANGED
@@ -63,3 +63,45 @@
63
63
  ```
64
64
 
65
65
  お時間ある方で解決方法御存知の方いらっしゃいましたらご助力頂けますと幸いです。
66
+
67
+
68
+ ---
69
+
70
+ ## 追記
71
+
72
+ コメント頂いた通り以下のように追記してみましたが、focusがコピー元?になっており事象は変わりませんでした。
73
+
74
+ ```javaScript
75
+ $('button').on('click',function(){
76
+ // コピー
77
+ var cloneContents = $(".copy-parent").find(".copy-child:first").clone(true);
78
+
79
+ // 追加
80
+ cloneContents.appendTo(".copy-parent");
81
+
82
+ $('.date').datepicker({
83
+ format: "yyyy年mm月dd日",
84
+ autoclose: true,
85
+ });
86
+ });
87
+ ```
88
+
89
+ ただ、以下のようにhtmlをべた書きして追加すると、想定通りの動作になりました。
90
+ htmlをべた書きするしかないでしょうか?
91
+
92
+ ```javaScript
93
+ $(function(){
94
+ $('.date').datepicker();
95
+ });
96
+
97
+ $('button').on('click',function(){
98
+ // コピー★cloneするのではなくhtmlべた書き
99
+ var html = '<div class="copy-child"><input type="text" class="form-control date" style="width:200px; margin-left:20px; margin-top:20px;"</div>';
100
+
101
+ // 追加
102
+ $(".copy-parent").append(html);
103
+ $(".copy-child:last").find('.date').removeClass('hasDatepicker').datepicker();
104
+ });
105
+ ```
106
+
107
+