为什么 document.ready 在 ajax 请求后没有加载
why document.ready not loaded after ajax request
我想在我的局部视图中单击 <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);
}
在@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>
我想在我的局部视图中单击 <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);
}
在@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>