質問: 添付画像のようなフォームを作っています。 設問グループ、設問をそれぞれ追加できるようにしたいです。 下記のコードで一応追加できるのですが、グループを追加した後に設問を追加することができません。 要素数の取得が上手くいっていないです。 (クローン元の要素数、下記のコードで言うと // 設問グループを追加の classLength) どなたかご教示いただけると幸いです。 ``` 設問グループタイトル 削除 Q. 削除 設問を追加する ※選択肢は上限20項目です。 設問グループを追加する // 設問グループを追加 // 設問を追加 ```
回答: コピーされる対象である要素の中にidが指定してあっては、複数のボタンに同一のidがふられてしまうのでだめなのでは?という気がしたので、以下のようにクラスに変更してみたところ、動きました。 原因がそこなのかは定かではありませんが・・・ ``` 設問グループタイトル 削除 Q. 削除 設問を追加する ※選択肢は上限20項目です。 設問グループを追加する ``` ``` // 設問グループを追加 ココは変更してません $(document).on('click', '#add_group', function () { //要素の数をカウントして、複製したフォームのnameを変更する classLength = $('[id^=group]').length; // 要素数 1, 2 selector = "#group" + (classLength); // 1つ前のID名 #group1, 2 newSelector = "group" + (classLength + 1); // 新しいID group2,3 // クローン処理 $("#group1").clone(true).insertAfter(selector).attr('id', newSelector); // 複製したものに関する調整処理 $("#" + newSelector).find("input").each(function (i, elm) { elm.name = elm.name.replace(/\[[0-9]+\]/, '[' + classLength + ']'); elm.id = elm.id.replace(/\-[0-9]+\-/, '-' + classLength + '-'); elm.value = null; }); }); // 設問を追加 $(document).on('click', '.add_question', function () { //クラスに対してイベント設定 //クリックされた要素の上部のwrap_inputを取得 let $wrap_input = $(this).parents(".area_add_question_360").prev(); //その要素をコピーして差し込み $wrap_input.prev().clone(true).insertAfter($wrap_input); }); ```