jQuery in update panel not successfully adding cssclass after panel refresh

Question

I have a div, which when clicked, displays a hidden asp:textbox via the following jQuery.

      function BindEvents() {
          $(document).ready(function () {
             $("#showtextbox").click(function () {  
                 $("#TextBox1").removeClass("hidden"); 
                 $("#TextBox1").addClass("showInline");  
      });

This works fine, except after the update panel is refreshed. After it is refreshed, when clicking “showtextbox” the textbox remains hidden. I know that the jQuery is running because it is hit when debugging. Here is my code.

  <ContentTemplate>
        <script type="text/javascript">
              Sys.Application.add_load(BindEvents);
        </script>
   </ContentTemplate>

   <asp:textbox runat="server" id="TextBox1"  CssClass="hidden" /> <span id=”showtb8”/>

Any ideas what’s going on here? How can I make the textbox visible after the update panel is refreshed? I thought that after adding it to the Sys.Application.add_load it would work, but it doesn't. This is also in a wizard control if that make a difference.

*I should note, that this same logic works fine when showing and hiding a regular div. It just is not working with the asp:textbox.

Answer 1

after ajax calls the event bindings are lost if you use regular bindings. try the on function of jquery.

         $("#showtextbox").on('click',function () {  
             $("#TextBox1").removeClass("hidden"); 
             $("#TextBox1").addClass("showInline");  
          });