1. 程式人生 > >頁面區域性重新整理後,JS,JQ失效問題

頁面區域性重新整理後,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;
        }
    });