为啥在ajax请求后没有加载document.ready
Posted
技术标签:
【中文标题】为啥在ajax请求后没有加载document.ready【英文标题】：why document.ready not loaded after ajax request为什么在ajax请求后没有加载document.ready 【发布时间】：2021-01-31 18:17:56 【问题描述】：我想在我的局部视图中单击 <a> 标记后调用 java 脚本，它是第一次工作，但在使用 ajax 并呈现我的局部视图后第二次，它不会转到 <a> 标记事件.让我们展示我的代码，让您更好地掌握它。这是我的父母观点：
@using X.PagedList
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Core.Common
@model X.PagedList.IPagedList<Services.ViewModel.Admin.Nurse.NurseDetailsViewModel>
@
ViewData["Title"] = "RegisteredNurseList";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
// LOT OF HTML TAG CODE HERE I JUST IGNOR THEM...
<section id="table-transactions">
<!-- datatable start -->
<div id="nursesList">
<partial name="PaginatedNurses" model="Model" />
</div>
<!-- datatable ends -->
</div>
</section>
@section modalSection
<script>
window.$(document).ready(function ()
window.$('#RegisteredNursePaginated').find('a[href]').on('click',
function (e)
e.preventDefault();
var sortOrder = window.$("#sortOrder").val();
var sortType = window.$("#sortType").val();
var minAge = window.$("#minAge").val();
var maxAge = window.$("#maxAge").val();
var page = getQueryStringValue(this, 0).replace('page=', '');
// window.$("#pageGetter").val(page);
debugger;
console.log(this);
window.$.ajax(
url: "/admin/RegisteredNurseList/",
type: 'GET',
data:
page: page,
SortOrder: sortOrder,
sortType: sortType,
MinAge: minAge,
MaxAge: maxAge
,
success: function (result)
debugger;
window.$('#RegisteredNursePaginated').html(result);
);
return false;
);
);
</script>
如您所见，我使用<partial name="PaginatedNurses" model="Model" /> 来调用局部视图。这是我的PaginatedNurses 部分视图：
@using Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http
@using X.PagedList
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Core.Common
@model X.PagedList.IPagedList<Services.ViewModel.Admin.Nurse.NurseDetailsViewModel>
<body>
<form>
<div id="RegisteredNursePaginated">
<div class="form-group row">
<div class="col-md-3">
از سن <input class="form-control" id="minAge" type="number" name="MinAge" value="@ViewBag.MinAge" />
</div>
<div class="col-md-3">
تا سن <input class="form-control" id="maxAge" type="number" name="MaxAge" value="@ViewBag.MaxAge" />
</div>
<div class="col-md-3">
مرتب سازی بر اساس
<select class="form-control" name="SortOrder" value="@ViewBag.SortOrder" style="width: 200px" id="sortOrder">
<option value="age">
سن
</option>
<option value="registerDate">
زمان ثبت نام
</option>
</select>
</div>
<div class="col-md-3">
نحوه مرتب سازی
<select class="form-control" name="SortType" value="@ViewBag.SortType" style="width: 200px" id="sortType">
<option value=1>
صعودی
</option>
<option value=0>
نزولی
</option>
</select>
</div>
</div>
<input type="submit" value="جست و جو" id="btnSearch" />
<div class="table-responsive">
<table id="table-extended-transactions" class="table mb-0">
<thead>
<tr>
<th>نام</th>
<th>سن</th>
<th>شماره پروانه کار</th>
@*<th>شماره ملی</th>*@
<th>دوره حرفه ای</th>
<th>تاریخ ثبت نام</th>
</tr>
</thead>
<tbody>
@foreach (var nurse in Model)
<tr>
<td><i class="bx bxs-circle success font-small-1 mr-50 align-middle"></i><span>@nurse.FullName</span></td>
<td class="text-bold-700">@nurse.Age</td>
<td class="text-bold-700">@nurse.NurseSystemNumber</td>
<td>
@nurse.ProfessionalCourseDescription
</td>
<td>
@nurse.SubmissionDatePersian
</td>
<td>
<div class="dropdown">
<span class="bx bx-dots-horizontal-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
</span>
<div class="dropdown-menu">
<a class="dropdown-item" href="@Url.Action("NurseDetails", "Admin", new id = @nurse.Id)"><i class="bx bx-edit-alt mr-1"></i> نمایش جزئیات</a>
<a class="dropdown-item" onclick="setInvitation('@nurse.Id')">تایید</a>
<a class="dropdown-item" onclick="refuseRegister('@nurse.Id')"><i class="bx bx-trash mr-1"></i>عدم تایید</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div id="pager">
<input value="1" type="hidden" id="pageGetter"/>
@Html.PagedListPager((IPagedList) Model, page =>
Url.Action("RegisteredNurseList",
new
page = page,
SortOrder = ViewBag.SortOrder,
SortType = ViewBag.SortType,
MaxAge = ViewBag.MaxAge,
MinAge = ViewBag.MinAge
),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
new AjaxOptions() HttpMethod = "GET", UpdateTargetId = "RegisteredNursePaginated"))
</div>
</div>
</div>
</form>
</body>
正如您所见，有 html 标签助手 @Html.PagedListPager((IPagedList) Model,... 这是使用 <a> 标签。我的意思是点击这个后，它会转到父modelSection：
<script>
window.$(document).ready(function ()
window.$('#RegisteredNursePaginated').find('a[href]').on('click',
function (e)
e.preventDefault();
var sortOrder = window.$("#sortOrder").val();
var sortType = window.$("#sortType").val();
var minAge = window.$("#minAge").val();
var maxAge = window.$("#maxAge").val();
var page = getQueryStringValue(this, 0).replace('page=', '');
// window.$("#pageGetter").val(page);
debugger;
console.log(this);
window.$.ajax(
url: "/admin/RegisteredNurseList/",
type: 'GET',
data:
page: page,
SortOrder: sortOrder,
sortType: sortType,
MinAge: minAge,
MaxAge: maxAge
,
success: function (result)
debugger;
window.$('#RegisteredNursePaginated').html(result);
);
return false;
);
);
</script>
它第一次工作，但在使用 ajax 并通过控制器渲染后，单击<a> 标签后将永远不会再进入该部分。这是我的控制器：
public async Task<IActionResult> RegisteredNurseList(int? page, int? sortType, string sortOrder,
int? minAge, int? maxAge)
bool isAjax = HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest";
ViewBag.PageNumber = page ?? 1;
int pageSize = 2;
int skip = (ViewBag.PageNumber - 1) * pageSize;
ViewBag.MinAge = minAge ?? 18;
ViewBag.MaxAge = maxAge ?? 99;
ViewBag.SortType = sortType ?? 1;
ViewBag.SortOrder = sortOrder ?? "age";
var tuple = await _admin.GetNurses(skip, pageSize, sortOrder ?? "age", sortType ?? 1, minAge ?? 18, maxAge ?? 99);
int total = tuple.Item2;
var nurses = tuple.Item1;
var result = new StaticPagedList<NurseDetailsViewModel>(nurses, ViewBag.PageNumber, pageSize, total);
if (isAjax)
return (ActionResult)PartialView("PaginatedNurses", result);
return View(result);
【问题讨论】：
似乎 onclick 分配是在 document.ready 时间完成的，然后，当您重新加载部分时，此分配会丢失。我建议创建一个函数并将其存储在外部 js 文件中。然后在 document.ready 和成功执行 ajax 后调用该函数 @Steve perfect 我终于明白了你的想法，现在我的代码可以正常工作了，我会发布你的解决方案。 【参考方案1】：在@steve 完美评论之后，我得到了他的想法，我改变了我的代码，如下所示，然后它起作用了：
<script>
function AjaxInit()
window.$('#RegisteredNursePaginated').find('a[href]').on('click',
function (e)
e.preventDefault();
var sortOrder = window.$("#sortOrder").val();
var sortType = window.$("#sortType").val();
var minAge = window.$("#minAge").val();
var maxAge = window.$("#maxAge").val();
var page = getQueryStringValue(this, 0).replace('page=', '');
// window.$("#pageGetter").val(page);
debugger;
console.log(this);
window.$.ajax(
url: "/admin/RegisteredNurseList/",
type: 'GET',
data:
page: page,
SortOrder: sortOrder,
sortType: sortType,
MinAge: minAge,
MaxAge: maxAge
,
success: function (result)
debugger;
window.$('#RegisteredNursePaginated').html(result);
);
return false;
);
</script>
<script>
window.$(document).ready(function ()
AjaxInit();
);
</script>
<script>
$(document).ajaxComplete(function ()
AjaxInit();
);
</script>
【讨论】：
以上是关于为啥在ajax请求后没有加载document.ready的主要内容，如果未能解决你的问题，请参考以下文章
JQuery 中ajax请求为啥总不到后台 浏览器可以正常访问后台 求解！！！