ASP.NET学习笔记[9] - jQuery和UpdatePanel兼容的问题

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

 

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

（代码片段1）

<script language="javascript">
 
 

  
  
$(document).ready(function()
  
  
{
  
  

   
   
//for table row
   
   
$("tr:even").css("background-color", "#F4F4F8");
  
  
  
  
});
 
 
</script>

以上代码在首次加载页面时可行，但是当我点击任何分页链接（部分回发页面获取该网页的数据），UpdatePanel使頁面部分更新之後jQuery控制的特效就會不起作用了。要解决这个问题，我们可以用下面的代码（代码片段 - 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>

在上面的代码片断中你可以看到我已经添加了一个函数调用pageLoad的，在每次页面加载時、页面的部分或全部回传時激發。分页链接被点击时，我们關注的问题是部分更新，因此在pageLoad函数，我检查isPartialLoad，我们使用相同的代码改变的交替行的背景颜色。

以下是一些更多的方法来达到同样的效果。

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