2

这个问题实际上是在询问如何继续扩展这个简单示例并查看我是否以正确的方式解决问题的方向。

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

1) 你会看到我正在为在 dialog() 的打开事件中调用的对话框元素建立点击事件。会有很多这样的，所以我想知道这是否是正确的地方。

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>

这是我尝试加载部分视图时使用的...

控制器：

public ActionResult LoadDialog()
{
    return PartialView("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>
4

1 回答 1

0

为什么您不只是简单地将您的视图放入 div 并.dialog()对其执行...？！

在您的第一个视图中：

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

每当您想要对话框时：

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

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

$("#divDialog").html(jqXHR.responseText); // or any hard coded content
于 2013-08-26T09:05:09.077 回答