asp.net - jQuery 点击消失进入深渊

Question

这是我的设置:

我的页面上有一个 asp.net 按钮 --

<asp:Button id="btnSelectEmp" runat="server" Text="Select Employee" />

我有一个 .js 文件，其中包含以下 jQuery 单击事件 --

$("input[id$='_btnSelectEmp']").click(function ($e) {
  $("div[id$='_divEmpSearch']").css("display", "inline");
  $e.preventDefault();
});

如您所见，单击该按钮将设置一个 div 可见。没什么特别的;不是火箭科学。

该 div 包含一个 asp.net 更新面板，并且包含一个 asp.net 用户控件 (.ascx)

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
  <div id="divEmpSearch" runat="server" style="display: none;">
    <uc:EmpSearch ID="ucEmpSearch" runat="server" />
  </div>
  // And a bunch of other controls that are updated according to whatever the user selects in the user control above
</ContentTemplate>
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="ucEmpSearch" />
</Triggers>
</asp:UpdatePanel>

上面的用户控件也包含在 asp.net 更新面板中，因为它必须与服务器通信。在文本框等其他控件中，用户控件上有两个按钮:1) 一个执行回发的 asp.net 按钮，2) 一个执行异步回发的 asp.net 按钮。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /
      <br />
      asp:Button ID="btnContinue" runat="server" Text="Select" OnClick="btnContinue_Click" />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
      <asp:PostBackTrigger ControlID="btnContinue" />
    </Triggers>
</asp:UpdatePanel>

用户控件中执行回发的按钮运行良好。我单击它，发生回发并且我的 div 控件被重新隐藏。然后，我可以单击“选择员工”按钮(我在问题的第一个问题中提供了代码的按钮)，然后 jQuery 单击事件将被处理，div 将重新显示。

但是，用户控件中执行异步回发的按钮也可以工作，但在隐藏 div 后，如果我单击“选择员工”按钮，则 jQuery 单击事件将不会被处理 .

这告诉我，由于某种原因，在异步回发到页面期间，“选择员工”按钮发生了一些情况，因此 jQuery 单击事件不再发生。为什么？

Answer 1

当您的更新面板返回新内容时，您的按钮将被替换为新按钮，因此:

$("input[id$='_btnSelectEmp']").click(function ($e) {

绑定(bind)到当时找到的元素，而您需要 .delegate()或.live()在这里监听当前和 future 元素的click事件，如下所示:

$("input[id$='_btnSelectEmp']").live("click", function ($e) {
  $("div[id$='_divEmpSearch']").css("display", "inline");
  $e.preventDefault();
});

或者使用 .delegate() 更便宜一些:

$("#container").delegate("input[id$='_btnSelectEmp']", "click", function ($e) {
  $("div[id$='_divEmpSearch']").css("display", "inline");
  $e.preventDefault();
});

在这种情况下，#container 应该是更新面板的父级，在回发中不会被替换。