UpdatePanel和jQuery不兼容 局部刷新jquery失效
更新時(shí)間：2013年09月09日 16:52:17 作者：
在做項(xiàng)目中發(fā)現(xiàn)，在使用了UpdatePanel的地方，局部刷新后，jquery失效了，后來經(jīng)過搜索找到不錯的解決方法，在此與大家分享下，有類似問題的朋友可以參考下
在做項(xiàng)目中發(fā)現(xiàn)，在使用了UpdatePanel的地方，局部刷新后，jquery失效了。
后來網(wǎng)上一查，才發(fā)現(xiàn)，jquery中的ready事件會在DOM完全加載后運(yùn)行一次，而當(dāng)我們實(shí)用了UpdatePanel，它只局部更新，并未重新加載頁面所有Dom，所以jquery中ready事件將不會再次執(zhí)行。所以，我們可以將ready事件中執(zhí)行的代碼提取出來，然后通過捕獲ScriptManager的EndRequest事件，在每次 UpdatePanel局部刷新之后執(zhí)行一次jQuery初始化代碼：
//處理ajax和ScriptManager的沖突
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
$(function () {
$("tbody").find("input:checkbox").each(function (key, val) {
$(val).click(function () {
var cbxId = $(this).attr("id");
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state, "fid": "SamID" }, isReturnStatus);
});
});
$("thead").find("input:checkbox").click(
function () {
if (confirm("確定要更新這一列數(shù)據(jù)嗎？") == true) {
var cbxId = $(this).attr("id");
var name = cbxId.substr(16);
var v = "tbody ." + name + " input[type='checkbox']";
if ($(this).attr("checked") == "checked") {
$(v).attr("checked", true);
}
else {
$(v).attr("checked", false);
}
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state }, isReturnStatus);
}
else {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
else {
$(this).attr("checked", true);
}
}
});
});
initCheckedStaus();
}
后來網(wǎng)上一查，才發(fā)現(xiàn)，jquery中的ready事件會在DOM完全加載后運(yùn)行一次，而當(dāng)我們實(shí)用了UpdatePanel，它只局部更新，并未重新加載頁面所有Dom，所以jquery中ready事件將不會再次執(zhí)行。所以，我們可以將ready事件中執(zhí)行的代碼提取出來，然后通過捕獲ScriptManager的EndRequest事件，在每次 UpdatePanel局部刷新之后執(zhí)行一次jQuery初始化代碼：
復(fù)制代碼 代碼如下:
//處理ajax和ScriptManager的沖突
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
$(function () {
$("tbody").find("input:checkbox").each(function (key, val) {
$(val).click(function () {
var cbxId = $(this).attr("id");
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state, "fid": "SamID" }, isReturnStatus);
});
});
$("thead").find("input:checkbox").click(
function () {
if (confirm("確定要更新這一列數(shù)據(jù)嗎？") == true) {
var cbxId = $(this).attr("id");
var name = cbxId.substr(16);
var v = "tbody ." + name + " input[type='checkbox']";
if ($(this).attr("checked") == "checked") {
$(v).attr("checked", true);
}
else {
$(v).attr("checked", false);
}
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state }, isReturnStatus);
}
else {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
else {
$(this).attr("checked", true);
}
}
});
});
initCheckedStaus();
}
相關(guān)文章
asp.net實(shí)現(xiàn)文件無刷新上傳方法匯總
本文給大家介紹的是asp.net實(shí)現(xiàn)文件無刷新上傳的2種方法，分別是使用swfupload插件和uploadify插件，講述的十分細(xì)致全面，附上示例，有需要的小伙伴可以參考下。2015-06-06
Linux安裝.Net core 環(huán)境并運(yùn)行項(xiàng)目的方法
這篇文章主要介紹了Linux安裝.Net core 環(huán)境并運(yùn)行項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
實(shí)現(xiàn).Net7下數(shù)據(jù)庫定時(shí)檢查的方法詳解
在軟件開發(fā)過程中，有時(shí)候我們需要定時(shí)地檢查數(shù)據(jù)庫中的數(shù)據(jù)，并在發(fā)現(xiàn)新增數(shù)據(jù)時(shí)觸發(fā)一個(gè)動作。為了實(shí)現(xiàn)這個(gè)需求，本文我們在?.Net?7?下進(jìn)行一次簡單的演示。感興趣的可以了解一下2022-12-12
深入Lumisoft.NET組件開發(fā)碰到亂碼等問題的解決方法
本篇文章介紹了，在Lumisoft.NET組件開發(fā)中碰到亂碼等一些問題的解決方法。需要的朋友參考下2013-05-05
ASP.NET(C#)...2006-07-07
http調(diào)用webservice操作httprequest、httpresponse示例
這篇文章主要介紹了http調(diào)用webservice操作httprequest、httpresponse示例,需要的朋友可以參考下2014-05-05
在Asp.Net Core中使用ModelConvention實(shí)現(xiàn)全局過濾器隔離
這篇文章主要介紹了在Asp.Net Core中使用ModelConvention實(shí)現(xiàn)全局過濾器隔離，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
ASP.NET筆記之文章發(fā)布管理小系統(tǒng)案例
本篇文章小編為大家介紹，ASP.NET筆記之文章發(fā)布管理小系統(tǒng)案例。需要的朋友參考下2013-04-04
ASP.NET User Control使用技巧一則...2007-04-04
.NET 8實(shí)現(xiàn)大文件分片上傳的高效方案匯總
在當(dāng)今互聯(lián)網(wǎng)應(yīng)用中,大文件上傳是一個(gè)常見需求,尤其是對于云存儲、視頻網(wǎng)站、企業(yè)文檔管理系統(tǒng)等場景,傳統(tǒng)的單次文件上傳方式在面對大文件時(shí)往往會遇到網(wǎng)絡(luò)不穩(wěn)定、內(nèi)存占用高、上傳失敗需重傳整個(gè)文件等問題,本文將介紹如何在.NET 8中實(shí)現(xiàn)高效穩(wěn)定的大文件分片上傳方案2025-04-04