在AJAX发布和重新绑定jQuery事件之后，jQuery不再有效

Question

我正在尝试为ASP.NET MVC构建一个分页系统;包含搜索表单的部分视图，显示数据的表格以及分页。我把它全部布局了，有点有效。我对jQuery不是很了解，所以我真的不确定我在哪里出错......

当我使用AJAX发布时，分页在更新UI后停止工作。我使用一个名为bindAllEvents()的函数重新绑定我的jQuery事件，但它似乎并没有实际重新绑定我的事件。我的模型在第一次调用后更新，第二次尝试使用＆＃34; next＆＃34;移动到下一页。 >链接调用我的控制器操作方法，但UI中没有任何更改。

jQuery：

$(document).ready(function() {
  bindAllEvents();
});

function pageEvent() {
  this.goToPage = function() {
    // Not yet implemented
    return false;
  }
}

function nextEvent(nextPage) {
  this.nextPage = function() {

    var url = '@Url.Action("Manage")'
    var data = @Html.Raw(Json.Encode(Model.Data));
    var categories = @Html.Raw(Json.Encode(Model.Categories));
    var _page = @ (Model.pager.CurrentPage + 1);

    var _model = {
      Data: data,
      Categories: categories,
    };

    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: url,
      data: JSON.stringify({
        model: _model,
        page: _page
      }),
      success: function(result) {
        //console.log("Success " + result);
        $('div[id="pagination"]').html($(result).find('div[id="pagination"]'));
        $('div[id="full-table"]').html($(result).find('div[id="full-table"]'));
        $('div[id="search-form"]').html($(result).find('div[id="search-form"]'));
        bindAllEvents();
      },
      error: function(result) {
        console.log("Error: " + result.responseText);
      }
    });
  }
}

function bindAllEvents() {
  $('#date-boxes').slideUp(1);

  // Have also tried $('body').on('click', '#next', ...) with no success
  $('div[id="pagination"]').on('click', '#next', function(e) {
    e.preventDefault();
    var onNextClickEvent = new nextEvent();
    onNextClickEvent.nextPage(@(Model.pager.CurrentPage + 1));
  });

  $("a[name='page-number']").on("click", function(e) {
    e.preventDefault();
    var onPageClick = new pageEvent();
    onPageClickEvent.goToPage($(this).attr('id'));
  });
}

分页的部分视图的HTML如下

@if (Model.EndPage > 1)
{
    <div style="color:#337AB7; padding-bottom: 0px;" id="page-counter">Page @Model.CurrentPage of @Model.TotalPages</div>
    <ul class="pagination">
    @if (Model.CurrentPage > 1)
    {
        <li>
            @Html.ActionLink("<<", "Manage", null, new { id = "first" })
        </li>
        <li>
            @Html.ActionLink("<", "Manage", null, new { id = "prev" })
        </li>
    }
    @for (var _page = Model.StartPage; _page < Model.EndPage + 1; _page++)
    {
        <li class="@(_page == Model.CurrentPage ? "active" : "")">
            @Html.ActionLink(_page.ToString(), "Manage", null, new { name = "page-number", id = _page })
        </li>
    }
    @if (Model.CurrentPage < Model.TotalPages)
    {
        <li>
            @Html.ActionLink(">", "Manage", "Announcements", null, new { id = "next" })
        </li>
        <li>
            @Html.ActionLink(">>", "Manage", null, new { id = "last" })
        </li>
    }
    </ul>
}

为了完整起见，我会将视图与部分视图一起包含在内，但我认为这不是必需的。

<div id="search-form">
    @{ Html.RenderPartial("_SearchForm", Model.Categories); }
</div>
<hr />
@if (Model.Data.Count == 0)
{
    <h2>No existing announcements.</h2>
}
else
{
    <div class="form-group" id="full-table">
        @{ Html.RenderPartial("_Manage-AncmtListing", Model.Data); }
    </div>
    <br />
    <div id="pagination">
        @{ Html.RenderPartial("_Pager", Model.pager); }
    </div>
}

Before ajax call
After ajax call

Answer 1

好的，所以如果不完全重构你的代码，我就会把它变成一个类似于你的代码的工作状态。您可能需要调整页面初始设置的方式，但这个想法适合您。您的主要问题是您没有更新或将下一页编号传递给您的函数，因此它每次都重复使用相同的页码或使用undefined。有一些小的改动，所以要密切注意以下代码：

'use strict';
$(document).ready(function() {
  bindAllEvents();
});

function nextEvent() {
  this.nextPage = function(page) {
    var url = '/Announcements/Manage'
    var data = [{"WATypeName":"Web Announcements","Categories":[{"ID":6,"Name":"Physician/Medical","IsSelected":true}],"WAID":1,"WADate":"\/Date(1460959200000)\/","WANum":"1123","Topic":"Online Provider Enrollment Summary Page Updated","Link":"web_announcement_1123_20160418.pdf","ToolTip":"Online Provider Enrollment Summary Page Updated","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":2,"WADate":"\/Date(1460613600000)\/","WANum":"1122","Topic":"Providers Invited to Complete Health Information Exchange Small Business Impact Questionnaire by April 22, 2016","Link":"web_announcement_1122_20160414.pdf","ToolTip":"Providers Invited to Complete Health Information Exchange Small Business Impact Questionnaire by April 22, 2016","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":8,"Name":"Durable Medical Equipment (DME)","IsSelected":true}],"WAID":3,"WADate":"\/Date(1460613600000)\/","WANum":"1121","Topic":"Attention Provider Type 12: Claims for CPT Codes with Age Restrictions Will Be Enforced","Link":"web_announcement_1121_20160414.pdf","ToolTip":"Attention Provider Type 12: Claims for CPT Codes with Age Restrictions Will Be Enforced","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":4,"Name":"Dental/Orthodontia","IsSelected":true}],"WAID":4,"WADate":"\/Date(1460527200000)\/","WANum":"1120","Topic":"Attention Provider Types 24 and 77: Radiology Codes Billable Effective January 1, 2016","Link":"web_announcement_1120_20160413.pdf","ToolTip":"Attention Provider Types 24 and 77: Radiology Codes Billable Effective January 1, 2016","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":2,"Name":"Outpatient","IsSelected":true},{"ID":6,"Name":"Physician/Medical","IsSelected":true}],"WAID":5,"WADate":"\/Date(1460527200000)\/","WANum":"1119","Topic":"Attention Provider Type 75: Rates for Psychiatric/Substance Abuse Services Updated","Link":"web_announcement_1119_20160413.pdf","ToolTip":"Attention Provider Type 75: Rates for Psychiatric/Substance Abuse Services Updated","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":6,"WADate":"\/Date(1460354400000)\/","WANum":"1118","Topic":"EDI Medicare Crossover Claims Notification","Link":"web_announcement_1118_20160411.pdf","ToolTip":"EDI Medicare Crossover Claims Notification","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":6,"Name":"Physician/Medical","IsSelected":true}],"WAID":7,"WADate":"\/Date(1460095200000)\/","WANum":"1117","Topic":"Claims for ICD-10 “Z” Codes and “O09” Codes Billed as the Primary/Principal/First-Listed Diagnosis That Denied Inappropriately Will Be Reprocessed (Updated April 14, 2016)","Link":"web_announcement_1117_20160408.pdf","ToolTip":"Claims for ICD-10 “Z” Codes and “O09” Codes Billed as the Primary/Principal/First-Listed Diagnosis That Denied Inappropriately Will Be Reprocessed (Updated April 14, 2016)","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":8,"WADate":"\/Date(1460095200000)\/","WANum":"1116","Topic":"Medicaid Services Manual Chapters 400, 600 and 1900 Updated","Link":"web_announcement_1116_20160408.pdf","ToolTip":"Medicaid Services Manual Chapters 400, 600 and 1900 Updated","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":9,"WADate":"\/Date(1460008800000)\/","WANum":"1115","Topic":"Attention Provider Types 23 and 76: Procedure Codes Updated in MMIS","Link":"web_announcement_1115_20160407.pdf","ToolTip":"Attention Provider Types 23 and 76: Procedure Codes Updated in MMIS","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":1,"Name":"Inpatient","IsSelected":true},{"ID":2,"Name":"Outpatient","IsSelected":true}],"WAID":10,"WADate":"\/Date(1459922400000)\/","WANum":"1114","Topic":"Attention Provider Types 30 and 83: Service Plans Will No Longer Be Faxed to Providers","Link":"web_announcement_1114_20160406.pdf","ToolTip":"Attention Provider Types 30 and 83: Service Plans Will No Longer Be Faxed to Providers","WATypeID":1}];
    var categories = [{"ID":1,"Name":"Inpatient","IsSelected":false},{"ID":2,"Name":"Outpatient","IsSelected":false},{"ID":3,"Name":"Pharmacy","IsSelected":false},{"ID":4,"Name":"Dental/Orthodontia","IsSelected":false},{"ID":5,"Name":"Vision","IsSelected":false},{"ID":6,"Name":"Physician/Medical","IsSelected":false},{"ID":7,"Name":"Personal Care Services (PCS)","IsSelected":false},{"ID":8,"Name":"Durable Medical Equipment (DME)","IsSelected":false},{"ID":9,"Name":"Behavioral Health","IsSelected":false},{"ID":10,"Name":"Waiver Providers","IsSelected":false},{"ID":11,"Name":"All Providers","IsSelected":false}];
    var _page = page;

    var _model = {
      Data: data,
      Categories: categories,
    };

    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: url,
      data: JSON.stringify({ model: _model, page: _page }),
      success: function(result) {
        //console.log("Success " + result);
         $('div#pagination').html($(result).find('div#pagination'));
         $('div#full-table').html($(result).find('div#full-table'));
         $('div#search-form').html($(result).find('div#search-form'));
        _page = parseInt(_page) + 1;   
        bindAllEvents(_page);
      },
      error: function(result) { console.log("Error: " + result.responseText); }
    });
  }
}

function bindAllEvents(page) {
  $('#date-boxes').slideUp(1);

  $('div#pagination').off('click.pagination');
  $('div#pagination').on('click.pagination', '#next', function (e) {
    e.preventDefault();
    var onNextClickEvent = new nextEvent();
    onNextClickEvent.nextPage(page || 2);
  });

  $("a[name='page-number']").off("click.pagination");
  $("a[name='page-number']").on("click.pagination", function(e) {
    e.preventDefault();
    var onPageClick = new pageEvent();
    onPageClickEvent.goToPage($(this).attr('id'));
  });
}