ASP.NET學(xué)習筆記[9] - jQuery和UpdatePanel兼容的問(wèn)題

http://blog.163.com/renlee_1007/blog/static/225358620116203403011/

在使用AJAX的時(shí)候，因為各種AJAX控件的功能、樣式和效率都不盡相同，所以為了效果和效率我們都會(huì )遇到混用的時(shí)候。這時(shí)就有問(wèn)題了，當用UpdatePanel翻頁(yè)後，jQuery就會(huì )失效。下面是一個(gè)案例：

（代碼片段1）

<script language="javascript">
$(document).ready(function()
{
//for table row
$("tr:even").css("background-color", "#F4F4F8");
});
</script>

以上代碼在首次加載頁(yè)面時(shí)可行，但是當我點(diǎn)擊任何分頁(yè)鏈接（部分回發(fā)頁(yè)面獲取該網(wǎng)頁(yè)的數據），UpdatePanel使頁(yè)面部分更新之後jQuery控制的特效就會(huì )不起作用了。要解決這個(gè)問(wèn)題，我們可以用下面的代碼（代碼片段 - 2）取代上面的代碼（代碼片段1）。

<script language="javascript">
$(document).ready(function()
{
$("tr:even").css("background-color", "#F4F4F8");
});
 
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("tr:even").css("background-color", "#F4F4F8");
}
}
</script>

在上面的代碼片斷中你可以看到我已經(jīng)添加了一個(gè)函數調用pageLoad的，在每次頁(yè)面加載時(shí)、頁(yè)面的部分或全部回傳時(shí)激發(fā)。分頁(yè)鏈接被點(diǎn)擊時(shí)，我們關(guān)注的問(wèn)題是部分更新，因此在pageLoad函數，我檢查isPartialLoad，我們使用相同的代碼改變的交替行的背景顏色。

以下是一些更多的方法來(lái)達到同樣的效果。

<script language="javascript">
function pageLoad(sender, args)
{
$("tr:even").css("background-color", "#F4F4F8");
}
</script>

或

<script language="javascript">
Sys.Application.add_load(FirejQuery);
function FirejQuery()
{
$("tr:even").css("background-color", "#F4F4F8");
}
</script>