JQuery的束縛點擊功能成爲綁定與ASP.Net AJAX回發

Question

大家好，

我有一個綁定到一個ASP一個簡單的jQuery功能：按鈕和火災點擊提交按鈕的時候，像這樣：

<asp:Button ID="btnSubmit" CssClass="btnSubmit" OnClick="btnSubmit_Click" runat="server" 
       Text="Send" /> 

$(document).ready(function() { 
    $(".btnSubmit").click(function() { 
     alert("button clicked"); 
    }); 
}); 

此代碼在第一次加載頁面時正確運行，但在單擊提交（併發生post/postback）後再次運行。 asp按鈕代碼位於UpdatePanel中。看起來好像JQuery代碼在回發之後「未註冊」或未綁定。我頁面上的ScriptManager控件，但是這一切都是我做它：

<asp:ScriptManager ID="ContactFormScriptManager" runat="server"> 
    <Scripts> 
    <asp:ScriptReference Path="Scripts/jquery-1.4.1.js" ScriptMode="Auto" /> 
    <asp:ScriptReference Path="Scripts/contact-form.js" ScriptMode="Auto" /> 
    </Scripts> 
</asp:ScriptManager> 

我懷疑還有更多我需要的ScriptManager做，以確保我的jQuery代碼保持註冊，但我不肯定是什麼。您的建議將不勝感激。

感謝， -NorthK

Answer 1

@Sarfraz是正確的關於解決辦法，但我想你可能需要一些解釋，爲什麼這個工程：

$(function() { 
    $(".btnSubmit").live("click", function() { 
    alert("button clicked"); 
    }); 
}); 

這並不是說它「未註冊」，而是UpdatePanel中的元素被完全銷燬/被新元素所取代。由於點擊處理程序存儲在這些元素上（當然，不完全是，但很接近），它不會自動爲新元素創建。然而

.live()原理不同，它增加了一個事件處理程序document未得到更換。它收聽click事件到bubble up the DOM併到達文檔。當它到達時，它檢查事件來自的元素是否與選擇器匹配...如果選擇器匹配，它將執行處理程序。

Answer 2

試試這個：

$(document).ready(function() { 
    $(".btnSubmit").live('click', function() { 
     alert("button clicked"); 
    }); 
});