1

这是我的设置:

我在页面上有一个 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 更新面板,它包含一个 asc.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 事件

这告诉我,由于某种原因,在异步回发到页面期间,Select Employee 按钮发生了一些事情,因此不再发生 jQuery click 事件。为什么?

4

4 回答 4

1

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

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

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

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

于 2010-11-11T19:38:45.490 回答
1

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

$("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,应该是更新面板的父级,不会在回发中被替换。

于 2010-11-11T19:38:59.997 回答
1

尝试live('click', function(){...})代替click(function(){...})

于 2010-11-11T19:34:25.453 回答
0

疯狂猜测:“_btnSelectEmp”被多次使用?

于 2010-11-11T19:37:18.087 回答