JQuery 绑定点击功能与 ASP.Net AJAX 回发解除绑定答案

【问题标题】：JQuery bound click function becoming unbound with ASP.Net AJAX postbackJQuery 绑定点击功能与 ASP.Net AJAX 回发解除绑定
【发布时间】：2010-08-14 23:55:09
【问题描述】：

大家好，

我有一个简单的 JQuery 函数，它绑定到 ASP:Button 并在单击提交按钮时触发，如下所示：

<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 代码保持注册状态，但我不确定是什么。您的建议将不胜感激。

谢谢， -北K

【问题讨论】：

标签： jquery asp.net-ajax

【解决方案1】：

@Sarfraz 对解决方案的看法是正确的，但我认为您可能需要解释一下为什么会这样：

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

并不是它被“取消注册”，而是 UpdatePanel 中的元素被新元素完全破坏/替换。由于点击处理程序存储在这些元素上（嗯，不完全是，但关闭）它不会为新元素自动创建。

.live() 但是工作方式不同，它向document 添加了一个事件处理程序，它不会被替换。它监听click 事件到bubble up the DOM 并到达文档。当它到达那里时，它会检查事件来自的元素是否与选择器匹配......如果选择器匹配，它会执行处理程序。

【讨论】：

@Sarfraz 和@nick，非常感谢。这就像一个魅力，解释有很大帮助！

【解决方案2】：

试试这个：

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

【讨论】：