使用更多 jQuery 加载视图时，jQuery 对话框会丢失所有功能

Question

我正在处理一个包含一些 jQuery 功能的 MVC 4 项目。我遇到的问题是，在我的一个视图中，我有一个TimeSheet 表，然后是一个显示“添加新”的按钮，它触发了一个 jQuery 对话框。在框中，我加载了另一个视图，该视图允许用户输入有关新 TimeSheet 条目的信息，其中包含其他 jQuery 小部件，例如自动完成、日期选择器和微调器。

对话框视图加载正常，并且完全按照我想要的方式工作。现在，问题是一旦视图在对话框中加载，所有对话框功能都会消失在窗口之外。无论我如何在原始视图中定义对话框，它的功能都不起作用。

比如我设置为这个对话框是不能拖动的，closeOnEscape即使设置为true也不起作用，最让我恼火的是右上角的关闭按钮（x）不工作，让我无法关闭对话框......请有人帮忙:(

以下是相关代码：

TimeSheet 视图中的按钮和脚本：

<button id="AddNew_1">Add New</button>

@section scripts{
<link rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 

    <script type="text/javascript">

        $(function () {      

            $("#AddNew_1").click(function () {
                $("#dialog").dialog("open");
            });

            $("#dialog").dialog({
                autoOpen: false,
                height: 570,
                width: 930,
                modal: true,
                draggable: true,
                closeOnEscape: true,
                open: function(event, ui) {
                    $(this).load("@Url.Action("New", "Task")", function()
                    {                       
                        $("#dialog").find("script").each(function(i) { 
                            eval($(this).text());
                        });
                    }); 
                }                 
            });   
        });

    </script>
    }

    <div id="dialog" title="Add New" style="overflow: hidden"></div>

对话框视图：

@model timeSheetSystems.Models.OperationModels

@{
ViewBag.Title = "AddNew";
Layout = "~/Views/Shared/View1.cshtml";
Model.Date = DateTime.Today;
}

@section featured {
    <section class="featured">
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>Add New TimeSheet Entry</h1>
            <h2></h2>
        </hgroup>                
    </div>
</section>
}

@section scripts{

<link rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-         ui.css" /> 
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/code_jquery_com-ui-1_10_3-jquery--ui.js">     </script>
<script type="text/javascript" src="/resources/demos/external/jquery.mousewheel.js">  </script>
<script type="text/javascript" src="/resources/demos/external/globalize.js"></script>
<script type="text/javascript" src="/resources/demos/external/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="/resources/demos/external/globalize.culture.ja-JP.js"></script>

<style>
.ui-widget {
font-size: 1em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-size: 1em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
* html .ui-autocomplete {
height: 100px;
}
</style>
<script type="text/javascript">    //autocomplete


$(document).ready(function () {

    $("#AC").autocomplete({

        source: function (request, response) {
            $.ajax({

                url: "/Task/AutoComplete", type: "POST", datatype: "json",
                data: { q: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.SPTaskId + ", " + item.TaskName + ", " +     item.Application, value: item.TaskId };
                    }));
                }
            });
        },
        select: function (event, ui) {
            $("#TaskId").val(ui.item.value);
            $(this).val(ui.item.label);
            return false;
        }
    });
});



</script>

<script type="text/javascript">    //spinner
$(function () {
    $("#WorkedHours").spinner({
        step: 0.50,
        numberFormat: "n",
        min: 0
    });
    $("#culture").change(function () {
        var current = $("#spinner").spinner("value");
        Globalize.culture($(this).val());
        $("#spinner").spinner("value", current);
    });
});
</script>

<script type="text/javascript">    //calendar
$(document).ready(function () {
    $("#Date").datepicker();
});
</script>

<script type="text/javascript">
$(".ui-icon ui-icon-closethick").click(function () {
    $('#dialog').dialog("close");
});
</script>


}

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)


<fieldset>
    <input type="hidden" id="culture" value="en-EN" />

    <div class="editor-label">
        @Html.LabelFor(model => model.TaskId, "Task")
    </div>
    <div class="editor-field">
        <input type="text" id="AC"/>
        @Html.HiddenFor(model => model.TaskId, new { id = "TaskId" })
        @Html.ValidationMessageFor(model => model.TaskId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Description, "Operation Description")
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.Description, new { rows = 5, cols = 200 })
        @Html.ValidationMessageFor(model => model.Description)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Date)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Date, "{0:MM/dd/yyyy}")
        @Html.ValidationMessageFor(model => model.Date)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.WorkedHours, "Hours Worked")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.WorkedHours)
        @Html.ValidationMessageFor(model => model.WorkedHours)
    </div>

    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
}

Answer 1

您已将 jquery 和 jqueryUI 脚本包含在 @section scripts{} 部分中的对话框视图中。此对话视图是通过 ajax 加载的，主视图无法访问其中包含的脚本。

尝试将这些脚本移动到 Layout 或加载 Dialog 视图的父视图。我相信这将解决您面临的异常行为。