jqueryプラグイン "select2" を使ったフォームを動的に追加（複製）すると上手く動かない。

###前提・実現したいこと

現在とあるサイト制作をしており、登録フォームのセレクトボックスでjqueryプラグインの「select2」を使っていますが、（自作で設置した）フォーム追加ボタンで動的に同じフォームを追加した際に、追加されたセレクトボックスがクリックできないため、動くようにしたいと思っています。

###発生している問題
キャプチャ内のフォーム最上部のセレクトボックスは機能が実装されるのですが、ボタンでフォームを動的に追加するとそれ以降のフォームのセレクトボタンがクリックしても何も起こらない状態になります。

###該当のソースコード

HTML
1                                    <div class="add_url_area">
2                                        <div class="form-group">
3                                            <label for="page_name" class="col-md-2 control-label required">ページ名</label>
4                                            <div class="col-md-6">
5                                                <input id="inputPageName" class="form-control" name="page_name" type="text" placeholder="株式会社xxxのページ">
6                                            </div>
7                                        </div>
8                                        <div class="form-group">
9                                            <label for="url" class="col-md-2 control-label required">ページURL</label>
10                                            <div class="col-md-3">
11                                                <input id="inputUrl" class="form-control" name="url" type="password" placeholder="https://123456.com">
12                                            </div>
13                                        </div>
14                                        <div class="form-group">
15                                            <label for="authority" class="col-md-2 control-label">ページカテゴリ</label>
16                                            <div class="col-md-3">
17                                                <select id="selectCategory" class="form-control select_category" name="category">
18                                                    <option value="1">美容</option>
19                                                    <option value="2">コーポレートサイト</option>
20                                                    <option value="3">健康食品</option>
21                                                    <option value="4">フェス</option>
22                                                    <option value="5">レストラン</option>
23                                                </select>
24                                            </div>
25                                        </div>
26                                        <btn class="col-md-offset-2 btn btn-warning url_add_btn">他のURLも追加</btn>
27                                    </div>
28

jquery
1$(function() {
2            $(".select_category").select2({
3               placeholder: "カテゴリを選択",
4               allowClear: true
5            });
6
7            $(".select_category").select2("val","")
8
9            /* ページフォーム追加*/
10            var addUrlArea = ".add_url_area"
11            var addForm = $(addUrlArea).html();
12            
13            $(document).on("click", ".url_add_btn", function() {
14                $(addUrlArea).append(addForm);
15            });
16});
17

###試したこと
イニシャライズが必要といくつかのサイトで発見し、試して見たのですが上手く行かずの状況です。

https://stackoverflow.com/questions/27561509/select2-initialize-select-after-appending-data-to-existing-select

###補足情報(言語/FW/ツール等のバージョンなど)

jqueryはver2.2.4、 select2はver4.0.3を使っています。

kei344

2017/08/30 12:54

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

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

回答2件

ベストアンサー

DOMの読み込みが完了したときにだけselect2が動いてますね。
動的に追加されたものに対しては動かないので、onの中にもう一度記述してみたらどうでしょうか？

javascript
1$(function() {
2    $(".select_category").select2({
3        placeholder: "カテゴリを選択",
4        allowClear: true
5    });
6
7    $(".select_category").select2("val","")
8
9    /* ページフォーム追加*/
10    var addUrlArea = ".add_url_area"
11    var addForm = $(addUrlArea).html();
12
13    $(document).on("click", ".url_add_btn", function() {
14        $(addUrlArea).append(addForm);
15        $(".select_category").select2({
16            placeholder: "カテゴリを選択",
17            allowClear: true
18        });
19    });
20});
21