asp.net中ScriptManager自帶Ajax與jQuery事件沖突

問題引訴：最近在使用asp.net自帶的無重新整理送出scriptmanager時，發現一個問題，就是和我自己用jquery寫的一些事件函數和局部重新整理相沖突。通過在網上收索，發現很多人都遇到這個同樣的問題。最終還是找到的解決的辦法，在此我想将其解決的辦法分享出來供大家參考。

問題解決辦法：

方法1、兩者實作都能夠實作頁面的無重新整理效果，是以可以保留其中的一種即可；

方法2、如果必須要兩者混合應用，那麼在用jquery綁定事件是就要注意一些了

   我們平時在jquery中綁定事件最常用的方式有以下三種：以click事件為例

   （1）target.click(function(){});-----和純js綁定事件沒得什麼差別

   （2）target.bind("click",function(){});-----隻綁定頁面已經存在的控件

（3）target.live("click",function(){});------采用事件委托，把事件綁定在dom樹的根節點上，而不是直接綁定在某個元素上，這樣新增加的元素可以通過事件冒泡被綁定上。

下面簡單說明一下jquery通過bind和live兩種方式綁定事件的差別

live方法其實是bind方法的變種，其基本功能就同bind方法的功能是一樣的，都是為一個元素綁定某個事件，但是bind方法隻能給目前存在的元素綁定事件，對于事後采用js等方式新生成的元素無效，而live方法則正好彌補了bind方法的這個缺陷，它可以對後生成的元素也可以綁定相應的事件。那麼live方法的這個特性是怎麼實作的呢？下面來探讨一下其實作原理。

live方法之是以能對後生成的元素也綁定相應的事件的原因歸結在“事件委托”上面，所謂“事件委托”就是指綁定在祖先元素上的事件可以在其後代元素上進行使用。live方法的處理機制就是把事件綁定在dom樹的根節點上，而不是直接綁定在某個元素上。舉一個例子來說明：

$(".clickme").live("click",fn);

 $("body").append("<div

class=‘clickme‘>測試live方法的步驟</div>");

    當我們點選這個新增的元素時會依次發生如下步驟：

      （1）生成一個click事件，傳遞給div來做處理

      （2）由于沒有事件直接綁定在div上，是以事件直接冒泡到dom樹上

（3）事件不斷冒泡，直到dom樹的根節點上，預設情況下，根節點上就綁定了這個click事件

      （4）執行由live綁定的click事件

（5）檢測綁定事件的對象是否存在，判斷是否需要繼續執行綁定的事件。檢測事件對象是通過檢測 

$(event.target).closest(‘.clickme‘) 能否找到比對的元素來實作的。

     （6）通過（5）的測試，如果綁定事件的對象存在的話，就執行綁定的事件。

      由于隻有在事件發生的時候，live方法才會去檢測綁定事件的對象是否存在，是以live方法可以實作後來新增的元素也可實作事件的綁定。相比之下，bind會在事件在綁定階段就會判斷綁定事件的元素是否存在，而且隻針對目前元素進行綁定，而不是綁定到父節點上。

想必到此，大家已經明白了上述問題産生的原因了吧，是以最好的解決的辦法就是将其事件綁定方式修改一下即可！

下面是一個簡單的例子：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<code>&lt;head runat=</code><code>"server"</code><code>&gt;</code>

<code>    </code><code>&lt;title&gt;&lt;/title&gt;</code>

<code>    </code><code>&lt;script src=</code><code>"js/jquery-1.7.1.js"</code>

<code>type=</code><code>"text/javascript"</code><code>&gt;&lt;/script&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code><code>$(function () {</code>

<code>            </code><code>$(</code><code>".asa"</code><code>).live(</code><code>"click"</code><code>, function () {</code>

<code>                </code><code>alert(4);</code>

<code>            </code><code>});</code>

<code>        </code><code>})</code>

<code>    </code><code>&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>    </code><code>&lt;form id=</code><code>"form1"</code>

<code>runat=</code><code>"server"</code><code>&gt;</code>

<code>    </code><code>&lt;div&gt;</code>

<code>        </code><code>&lt;asp:scriptmanager id=</code><code>"scriptmanager1"</code>

<code>        </code><code>&lt;/asp:scriptmanager&gt;</code>

<code>        </code><code>&lt;asp:updatepanel id=</code><code>"updatepanel1"</code>

<code>            </code><code>&lt;contenttemplate&gt;</code>

<code>                </code><code>&lt;asp:button id=</code><code>"button1"</code>

<code>runat=</code><code>"server"</code>

<code>text=</code><code>"button"</code>

<code>onclick=</code><code>"button1_click"</code>

<code>/&gt;&lt;asp:textbox</code>

<code>                    </code><code>id=</code><code>"textbox1"</code>

<code>runat=</code><code>"server"</code><code>&gt;&lt;/asp:textbox&gt;</code>

<code>                </code><code>&lt;input type=</code><code>"button"</code>

<code>class</code><code>=</code><code>"asa"</code>

<code>value=</code><code>"danji"</code>

<code>/&gt;</code>

<code>            </code><code>&lt;/contenttemplate&gt;</code>

<code>        </code><code>&lt;/asp:updatepanel&gt;</code>

<code>    </code><code>&lt;/div&gt;</code>

<code>    </code><code>&lt;/form&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>