在AJAX发布和重新绑定jQuery事件之后，jQuery不再工作
本文关键字：jQuery 事件 之后 工作 不再 绑定 AJAX 新绑定 | 更新日期: 2023-09-27 18:06:21
我正在尝试为ASP建立一个分页系统。净MVC;对于搜索表单、显示数据的表和分页的部分视图。我把它都布置好了，它有点起作用了。我不太擅长jQuery，所以我真的不确定我在哪里出错了…
当我使用AJAX发布时，更新UI后分页停止工作。我使用一个名为bindAllEvents()的函数重新绑定我的jQuery事件，但它似乎并没有真正重新绑定我的事件。我的模型在第一次调用后更新，第二次尝试使用"next">链接移动到下一页，调用我的控制器动作方法，但UI中没有任何变化。
$(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>
}
ajax调用前
ajax调用后
好了，在没有完全重构代码的情况下，我使它达到了与您所拥有的类似的工作状态。您可能需要调整页面的初始设置，但这个想法已经为您准备好了。你的主要问题是，你没有更新或传递下一个页码通过你的函数，所以它是重用相同的页码或使用未定义的每次。这里有一些小的变化，所以请密切关注下面的代码:
'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'));
});
}