代码之家 › 专栏 › 技术社区 › Jagd Dai

jQuery click消失在一些深渊中

jquery-click-event jquery asp.net

1

Jagd Dai · 技术社区 · 15 年前

这是我的设置:

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

我有一个.js文件,其中包含以下jQuery click事件--

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

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

<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>

处理jQuery click事件并重新显示div。

如果我单击Select Employee按钮,jQuery click事件将不会被处理

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

4 回复 | 直到 15 年前

1

Nick Craver 15 年前

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

$("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 应该是更新面板的父级在后场换人。

2

1

Joel 15 年前

使用 live() 功能。 实时() btnSelectEmp 不需要在事件绑定的时候存在。

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

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

另外,我在这里修改了jquery选择器,以使用元素的确切客户机id。这将提高速度,而且我似乎还记得某些选择器在Jquery的某些版本中不能与事件委派一起工作。

3

1

Will 14 年前

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

4

0

Hogan 15 年前

胡乱猜测:“_btnSelectEmp”被多次使用?