Question

这是我的设置：

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

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

我有一个带有以下jQuery点击事件的.js文件 -

$("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控件。然后，我可以单击Select Employee按钮（我在问题的第一个提供代码的那个按钮）并处理jQuery click事件并重新显示div。

但是，执行异步回发的用户控件中的按钮也可以工作，但是在隐藏div后，如果我再单击Select Employee按钮则不会处理jQuery click事件

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

Answer 1

尝试live('click', function(){...})而不是click(function(){...})

Answer 2

使用live()功能。 live()将click事件委托给父元素，因此在绑定事件时不需要存在元素（在本例中为btnSelectEmp）。

$("#<%=btnSelectEmp.ClientID%>").live("click" function ($e) {
  $("#<%=divEmpSearch.ClientID%>").css("display", "inline");
  $e.preventDefault();
});

正在发生的事情是btnSelectEmp按钮被异步调用替换，并且新元素尚未绑定到事件处理程序。

另外，我在这里修改了jquery选择器以使用元素的确切客户端ID。这将提高速度，而且我似乎记得某些选择器在某些版本的Jquery中不能使用事件委托。

Answer 3

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

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

绑定到当时找到的元素，而您希望此处.delegate()或.live()收听来自当前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应该是更新面板的父级，不会在回发中被替换。

Answer 4

狂野猜测：“_btSeSelectEmp”被多次使用？

jQuery点击消失在一些深渊中

4 个答案: