jquery - MVC4アプリケーションのJquery UIダイアログが部分ビューからダイアログコンテンツをロードする

Question

この質問は、この単純な例を拡張する方法と、問題に正しい方法でアプローチしているかどうかを確認する方法についての指示を実際に求めています。

Jquery UI を初めて使用します。クリックイベントで以下の jquery UI ダイアログ (正常に動作します) を呼び出しています。ダイアログには多数の要素 (チェックボックスなど) が含まれており、クリックすると最初にダイアログを呼び出した要素に対してアクションを実行します。(showdialog(this) の「this」)

1) dialog() の open イベントで呼び出されるダイアログ要素のクリック イベントを確立していることがわかります。これらのいくつかがあるので、これがこれを行う正しい場所かどうか疑問に思っています.

2) ダイアログが複雑になるかもしれないので、.html() を使用してコンテンツをロードするのではなく、部分ビュー (または同様のもの) を使用したい $(this).load('@Url .Action("controllername")') を Start アクションに追加します。コンテンツは正常に読み込まれましたが、クリック イベントが失われました。そのため、dialogevents() を部分ビューに移動しましたが、それでも機能せず、チェックボックスをクリックすると実際に Chrome がクラッシュしたように見えました。

以前にこれを経験したことがある人は、a) ダイアログにコンテンツをロードするための推奨される方法、および b) ダイアログ内の要素のクリック イベントを管理するための最良の方法について何か提案をしてもらえますか?

または...これには .dialog() を使用しないでください。:)

ありがとう。

   <script>
        $(function (e) {            
                $(".Text").on("click", function (e) {
                    showdialog(this);
                });
            }

            function showdialog(obj) {
                var customdialog = $('<div id="customdialog"></div>')                
                .html('<h2>Hello World</h2><br>Color: <input class="thischeckbox" type="checkbox" name="color" value="checked"> <input class="thatcheckbox" type="checkbox" name="columns" value="checked">')
                .dialog({
                    modal: false,
                    dialogClass: "contentpopup",
                    title: "Here's My Modal",
                    height: 500,
                    width: 300,
                    open: function (event, ui) {
                        //$(this).load('@Url.Action("LoadDialog")');
                        dialogevents();
                    }
                });

                function dialogevents() {
                    $(".thischeckbox").on("click", function () {
                        alert("this clicked!");

                    $(".thatcheckbox").on("click", function () {
                        alert("that clicked!");
                    });
                }
            };
        });
    </script>

これは、部分ビューを読み込もうとしたときに使用したものです...

コントローラ：

public ActionResult LoadDialog()
{
    return PartialView("LoadDialog");
}

LoadDialog.cshtml:

@{
    Layout = null;
}


<div>
        <h2>Hello World</h2><br>Color: <input class="mycheckbox" type="checkbox" name="color" value="checked"> <input class="columncheckbox" type="checkbox" name="columns" value="checked">
</div>

<script>
    $(function dialogevents(obj) {
      //same as above
    });
</script>