在视图中加载的JQuery在部分视图中不可用

本文关键字:视图 JQuery 加载 | 更新日期: 2023-09-27 18:23:51

我有以下视图:

@model EDR.Presentation.WebMain.ViewModels.MvcSupportQueryViewModel 
@{
    ViewBag.Title = "Support Queries";
}
<div id="updatedContent">
    @{ Html.RenderPartial("_QueryList", Model); }
</div>
@section scripts{
    @Scripts.Render("~/Scripts/Model Scripts/Support Queries/SupportQueries.js")
}

以下是QueryList部分视图(_Q):

@model EDR.Presentation.WebMain.ViewModels.MvcSupportQueryViewModel 
@Styles.Render("~/Content/css")
<h2>Support Queries</h2>
@using (Ajax.BeginForm("SearchQueries", "SupportQueries", new AjaxOptions() { HttpMethod = "get", UpdateTargetId = "updatedContent", InsertionMode = InsertionMode.Replace }))
{
    <div class="col-md-6">
        @Html.LabelFor(model => model.QueryFilter)
        @Html.DropDownList("QueryFilter", Model.QueryFilter)
    </div>
    <div class="col-md-6">
        @Html.LabelFor(model => model.DRTBUnitCollection)
        @Html.DropDownList("DRTBUnit", Model.DRTBUnitCollection)
    </div>
    <input type="submit" value="Search" class="btn btn-info" />
}
<div class="lineSeperator-100"></div>
@if (Model.QueryCollection.ModelCollection.Items.Count > 0)
{
    <div class="table table-responsive">
        <table class="table-hover">
            <thead>
                <tr>
                    <th class="col-md-1">Reference</th>
                    <th class="col-md-1">Type</th>
                    <th class="col-md-3">Facility</th>
                    <th class="col-md-4">Subject</th>
                    <th class="col-md-1">Date</th>
                    <th class="col-md-1">Resolved</th>
                    <th class="col-md-1"></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var value in Model.QueryCollection.ModelCollection.Items)
                {
                    <tr>
                        <td class="col-md-1">@value.ReferenceNoDisplay</td>
                        <td class="col-md-1">@value.QueryType.DisplayName</td>
                        <td class="col-md-3">@value.Facility.Name</td>
                        <td class="col-md-4">@value.Subject</td>
                        <td class="col-md-1">@value.QueryDate.Value.ToShortDateString()</td>
                        <td class="col-md-1">@value.IsResolved</td>
                        <td class="col-md-1">@Ajax.ActionLink("View", "ViewSupportQuery", new { queryID = value.ID }, new AjaxOptions() { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" },new { @class = "btn btn-info" })</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    if (Model.QueryCollection.CanGoPrevious)
    { 
        @Ajax.ActionLink("<<", "Paging", new { pageNumber = Model.QueryCollection.PageNumber - 1, queryFilter = Model.UserQueryFilter.ToString(), drTBUnit = Model.FacilityID }, 
                                new AjaxOptions() { HttpMethod = "get", UpdateTargetId = "updatedContent", InsertionMode = InsertionMode.Replace }, 
                                new { @class = "btn btn-info" })
    }
    if (Model.QueryCollection.CanGoNext)
    {
        @Ajax.ActionLink(">>", "Paging", new { pageNumber = Model.QueryCollection.PageNumber + 1, queryFilter = Model.UserQueryFilter.ToString(), drTBUnit = Model.FacilityID },
                                new AjaxOptions() { HttpMethod = "get", UpdateTargetId = "updatedContent", InsertionMode = InsertionMode.Replace },
                                new { @class = "btn btn-info" })
    }
}
else
{
    @Html.Label("No Queries to display")
}

当我单击此Partial View中的View按钮时,它会返回另一个Partial View,将div元素中的所有内容替换为ID"updatedContent"。

以下是支持"查看"功能的控制器操作。

[HttpGet]
public PartialViewResult ViewSupportQuery(Guid queryID)
{
    var vm = new MvcSupportQueryViewModel()
    {
        QueryID = queryID
    };
    vm.GetQueryByID();
    return PartialView("_ViewQuery", vm);
}

然而,在我点击"查看"按钮后,它会打开一个新的局部视图。如果我在Chrome中检查我的源代码,我可以看到JQuery文件不再加载。

JQuery文件位于我视图中的@部分中,根据我的理解,包括视图中的JQuery,它应该在前面的所有局部视图中都可用。

我是不是遗漏了什么?

在视图中加载的JQuery在部分视图中不可用

好吧,问题似乎出在我的JQuery代码上。

我替换了以下JQuery代码:

$("#btnAddResponse").on("click", function () {
    $("#hiddenContent").slideToggle();
});

采用以下事件委派方法:

$(document).on("click", "#btnAddResponse", function () {
    $("#hiddenContent").slideToggle();
});