堆棧內存溢出
  簡體   English   中英

為什么在 ajax 請求后未加載 document.ready

[英]why document.ready not loaded after ajax request

 原文  2020-10-17 12:32:48  4   1    javascript/ ajax/ asp.net-core/ partial-views/ razor-pages

問題描述

我想在我的局部視圖中單擊<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);

        }

1 個解決方案

解決方案1
 1 已采納  2020-10-17 13:26:47

在@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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Ajax加載頁面上的document.ready 在document.ready jquery上運行ajax請求 需要能夠在文件document.ready（）之后加載元素的情況下運行ajax調用 通過AJAX鏈接加載時的Jquery Document.ready jQuery - 在使用AJAX加載內容時，document.ready沒有觸發 AJAX加載部分的頁面是否具有document.ready等效項？ 如何在document.ready（）之后加載的HTML上使用jquery document.ready是在異步js之后加載加載的嗎？ document.ready（）在一個函數內部和Ajax調用之后 為什么document.ready等待？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM