MVC4应用程序中的Jquery UI对话框从局部视图加载对话框内容

这个问题实际上是在询问如何继续扩展这个简单示例的方向，看看我是否以正确的方式处理这个问题

这是我第一次使用jQueryUI。我正在对一个点击事件调用下面的jQueryUI对话框（工作正常）。该对话框将包含许多元素（复选框等），单击这些元素将对首先调用该对话框的元素执行操作。（showdialog（this）中的“this”）

1） 您将看到，我正在为dialog（）的open事件中调用的dialog元素建立click事件。会有很多这样的，所以我想知道这是否是正确的地方做这件事

2） 对话框可能会变得复杂，因此我不想使用.html（）加载内容，我想使用局部视图（或类似视图）。我尝试将$（this.load（'@Url.Action（“controllername”））添加到开始操作。内容加载正常，但单击事件丢失。因此，我将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>

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>

@{
布局=空；
}
你好，世界
颜色：
$（函数对话框事件（obj）{
//同上
});

为什么您不只是简单地将视图放入div并在其上执行

.dialog（）

在您的第一个观点中：

<div id="divDialog" style="display:none">
    @Html.Partial("MyPartialView")
</div>

您还可以将任何内容动态呈现到对话框中：

$("#divDialog").html(jqXHR.responseText); // or any hard coded content

---

谢谢你的回复。我同意使用@Html.Partial（），但在其他方面，使用稍微不同的方法也是一样的。唯一的区别是div是否已经存在，还是动态创建的。令人困惑的是，为什么单击事件会导致浏览器崩溃（我的意思是处理器使用率达到50%，我必须终止进程）。我在移动到局部视图时遇到的问题是，单击函数不再具有最初调用对话框的元素的上下文。或者更简单地说，我是个白痴。

$("#divDialog").dialog({
    // dialog options...
});

$("#divDialog").html(jqXHR.responseText); // or any hard coded content