jquery event handler inside updatepanel not working after postback

Question

I have a div with "id=ShowDetails". In my javascript I have this:

    $(document).ready(function () {
       UIactions();
    });

    function UIactions () {
        $('#ShowDetails').click(function () {
            alert("bingo");
          }
     });

The div is inside the update panel that gets posted back. When the page loads, if I click the div, I get the bingo but after the postback, I don't. Any idea why?

Thanks.

@PTuckley: well the question got over 20K views so far because people look into Google for answers and formulate in their questions differently. — frenchie, Apr 09 '15 at 15:10
When questions are closed as duplicates they still get indexed for searching, but redirect users to the target question with less clicking. The target question has 127K views, but probably 20K of them were people who had to click a few extra times because they came here first. — Flexo, Apr 09 '15 at 21:44
@Flexo: right, so the value of duplicates is in helping some people find the answer they're looking for. Some people will search with keywords that link to the "best" answer while others will search with keywords that link to a duplicate, and they'll then get to their destination from there. Hence no need to downvote duplicates, especially when they have 20K views. — frenchie, Apr 09 '15 at 23:32

score 2 · Answer 1 · edited Jul 24 '14 at 13:19

2

I know that this is a really old post, but i came by this by having the issue that my jQuery script didn't work after content inside an update panel was updated.

I found an easy solution and all the other solutions are not worth looking at :)

Simple just remember to add your asp.net controls to the UpdatePanel's Triggers as postback.

<Triggers>
     <asp:PostBackTrigger ControlID="....." />
</Triggers>

Hope this help someone, because i have spent too much time on finding the solution.

edited Jul 24 '14 at 13:19

VMAtm

27,943
17
79
125

answered Jul 24 '14 at 13:01

NoxiaZ

21
2

after two days of struggle. Thanks a ton :) – ARB Mar 13 '15 at 10:00
does this go in web.config? – Monz Mar 31 '16 at 21:07

score 1 · Answer 2 · answered Feb 11 '11 at 22:23

As @Artiom notes, this problem is because on update the UpdatePanel overwrites the existing markup with the markup generated on the postback, which obliterates any event handlers you had on HTML elements in the UpdatePanel.

There are a couple of ways to fix this, which I discuss in my article Rebinding Client-Side Events After a Partial Page Postback. The easiest approach (IMO) is to use jQuery's live function. From my article:

If you are using jQuery, as I did in these examples, there's an even easier approach - the live() function. The live() function defines an event handler for one or more HTML elements now or in the future. What that means is that you can say things like, "Hey, jQuery, I want you to affix this event handler to the click event of any <a> element on the page, whether it exists now or at some future point." Consequently, if an <a> element is dynamically added to the page at a later time, jQuery will automatically wire up its click event to the specified event handler.

See the article for more information, as well as an example.

score 0 · Answer 3 · edited May 16 '12 at 00:26

0

Because the update panel rewrites all javascript handlers. Solution for your situation is to attach your function to javascript events handler on every postback.

edited May 16 '12 at 00:26

frenchie

51,731
109
304
510

answered Feb 11 '11 at 22:18

Artiom

302
3
11

jquery event handler inside updatepanel not working after postback

3 Answers3

Linked