jQuery click disappears into some abyss

Question

Here is my setup:

I have an asp.net button on a page --

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

I have a .js file with the following jQuery click event --

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

As you can see, clicking upon the button will set a div visible. Nothing special; not rocket science.

The div is wrapped with an asp.net update panel, and it contains an asp.net user control (.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>

The user control above is also wrapped in an asp.net update panel, because it has to communicate with the server. Among other controls like textboxes and such, the user control has two buttons upon it: 1) an asp.net button that does a postback and 2) an asp.net button that does an asynchronous postback.

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

The button in the user control that does a postback is working great. I click it, a postback occurs and my div control is re-hidden. I can then click on the Select Employee button (the one that I supplied the code for at the very first of the question) and the jQuery click event is handled and the div will be reshown.

However, the button in the user control that does an asynchronous postback works also, but after it hides the div, if I then click on the Select Employee button the jQuery click event will not be handled.

What this tells me is that for some reason during an asynchronous postback to the page, something happens to the Select Employee button so that the jQuery click event no longer happens. Why?

Answer 1

Your button is replaced with a new one when your update panel comes back with new content, so this:

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

Binds to the elements it finds at that time, instead you'll want .delegate() or .live() here to listen for click events from current and future elements, like this:

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

Or a bit cheaper using .delegate():

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

In this case #container should be a parent of the update panel, one that doesn't get replaced in the postback.

Answer 2

Use the live() function. live() delegates the click event to a parent element, so the element (in this case btnSelectEmp) doesn't need to exist at the time the event is bound.

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

What is happening is the btnSelectEmp button is getting replaced by the asynchronous call and the new element has not been bound to an event handler.

Also, I've modified the jquery selector here to use the exact client id of the element. This will improve speed, plus I seem to recall certain selectors don't work with event delegation in certain versions of Jquery.

Answer 3

try live('click', function(){...}) instead of click(function(){...})

Answer 4

Wild guess : "_btnSelectEmp" is used more than once?