3

ボタンのクリックで選択リストを動的に作成し、それをdivに追加するだけです。問題なく動作していますが、この選択リストをselect2で期待どおりに検索可能に動作させたい場合、動作しません。

以下では、選択リストを GGroupDropDownListForJavascript という名前の html ヘルパーを使用してメソッドに渡しています。html の結果は次のようになります。

 <select class="form-control input-xxlarge select2me" id="TagCategoryId" name="TagCategoryId">
 <option value="cf1d7da6-f49f-47aa-ba6d-a58f017c59ec">Element1</option>
 <option value="cf1d7da6-f49f-47aa-ba6d-a58f017c59ec">Element2</option>
 </select>

ここに私のJSコードがあります。

    $('#post').click(function (e) {
     var arrowBox = $( "<div>"+'@Ajax.JavaScriptStringEncode(Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "").ToHtmlString())' + "</div>");
     arrowBox.appendTo($("#imageContainer"));
     $('#TagCategoryId').select2();
})

このメソッドのエラーを下回っています。

キャッチされていない TypeError: $(...).select2 は関数ではありません

ところで、動的に作成されていない要素に対してテストしましたが、問題なく動作しています。しかし、動的に作成されたものになると、機能しなくなります。何か不足していますか？ありがとうございました。

4

1 に答える 1

2

私の問題に対する真の解決策を見つけることができませんでした。最後に、GGroupDropDownListForJavascript を以下のように Html に挿入します。そして、私の他のdivからそれを呼び出しました。それは素晴らしい解決策ではありませんが、私にとっては問題を解決します。

        <div id="copyDiv">
            @Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "")
        </div>

そしてJSは似ています。

        var categoryBox = $('#copyDiv');
        categoryBox.appendTo(arrowBox);

アップデート

上記の行を追加した後、実際には機能しません。関連する選択リストをdivに入れるだけですが、選択リストはもう機能しません。だから私は以下のように私の問題を解決しました;

以下のメソッドを実行します。ここで2つのことに注意する必要があります。まず、select2() セレクターに接頭辞「select」を必ず付けてください。そうしないと、「Select2 に対して未定義のクエリ関数が定義されていません」というエラーが発生します。これはそのケースを解決し、2 つ目は select2.js が最新であることを確認することです。

   $('body').on('DOMNodeInserted', 'select', function () {
        $("select.form-select").select2();
    });
   $("button").on("click", function () {
         $(".dcontainer").append($('@Ajax.JavaScriptStringEncode(Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "").ToHtmlString())'));
    });

これが誰かを助けることを本当に願っています。

于 2016-01-18T21:00:19.277 に答える