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.

"I know that the jQuery is running because it is hit when debugging." That means that the click event is fired, right? Or i misunderstood? — A. Wolff, May 29 '13 at 15:00
And what give you in click handler: $("#TextBox1").length ??? I don't use asp but i heard it can change some attribute as id. — A. Wolff, May 29 '13 at 15:07
the id is not changed, and i do not have a value for .length — JAck28, May 29 '13 at 15:10
You mean $("#TextBox1").length returns 0? If yes, that means that this element doesn't exist. Could you post rendered html code (client side)? — A. Wolff, May 29 '13 at 15:13
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30846/discussion-between-jack28-and-roasted) — JAck28, May 29 '13 at 15:33

score 0 · Answer 1 · answered May 29 '13 at 14:52

0

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");  
          });

answered May 29 '13 at 14:52

user1

1,063
1
8
28

Well, if i understand your statement, you are not even using delegation here – A. Wolff May 29 '13 at 14:58
@user1 the on function is giving me the same results – JAck28 May 29 '13 at 15:09
can you firebug and check the id of the button after rendering? If the button is inside a control or a masterpage, it changes id. – user1 May 29 '13 at 15:12
The id of the "button" stays the same after rendering. – JAck28 May 29 '13 at 15:20

jQuery in update panel not successfully adding cssclass after panel refresh

1 Answers1

Linked