頁面區域性重新整理後,JS,JQ失效問題
起因:今天在做一個頁面的時候,用了.net的空間UpdatePanel,但是當頁面區域性重新整理之後,我在document Ready 後 JQ繫結的KeyUp事件居然失效了。
分析:
一:UpdatePanel ,頁面區域性重新整理,而$()是頁面全部重新整理後才會執行。
於是我就把這句話去除了,但是依然沒有觸發KeyUp事件。
二:百度搜索了一下,發現keyUp事件其實本質是bind,而bind只能對當前元素進行繫結事件,對於未來事件不能繫結,所以需要使用live繫結事件,這一個好使了。
這個為轉載詳細區別:
1、click()與bind()
1).click()
在jqeury事件處理API中,bind()是其API基礎。click(),mouseover(),mousermove等來處理事件,真正起作用的是bind()。而這些方法都只是輔助作用(別名函式),簡化使用。他們都只有一個引數(觸發事件時執行的回撥函式).
2).bind()
bind()能更好的控制事件處理函式中的處理過程,且它可以一次繫結多個事件(事件名作為第一個引數,多個事件用空格分開,eg:bind('click contains',function(){}) 滑鼠左右點選事件 )
所有實用bind()或者click(),mouserover()繫結的事件都可以使用unbind()方法解除繫結
2、live()
與bind()作用基本一樣。
最重要區別:live()可以將事件繫結到當前和將來的元素(eg:為id=zy元素繫結點選事件,而當你用js動態生成一個節點並插入到dom文件結構中時,如果你是用bind()繫結的,怎麼新插入的節點將不會有該bind繫結事件。而live()則可以);
缺點: 無法用於鏈式結構。
eg: $('.class').live('click',function(){ }) 正確寫法
$('.class').find('span').live('click',function(){ }) 錯誤寫法 無效
live()繫結的事件可用 die()方法解除繫結。
3、delegate()
與live()作用基本一樣,但是解決live缺點。它通過將選擇器內的上下文作為第一個引數來解決live問題(也就是delegate得第一個引數你可以當作是一個選擇元素所用)。
eg. $('.class').delegate('span','mouseover',fucntion(){ }) 為class為class的元素下的所有span標籤繫結mouseover事件。
通過delegate()繫結的事件可通過undelegate()方法解除處理函式的繫結。
四:還有一種方法:如下所示
var
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$("#txtDE").keyup(function (event) {
onlynum(this);
switch (event.keyCode) {
case 13: Get(); break;
}
});