Second time click of a button inside updatePanel, the event does not fire in jQuery

Question

In my aspx file, I have:

<asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Always" runat="server">
    <ContentTemplate>
       <asp:Button ID="Button1" runat="server" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>

In my JavaScript file I have:

$('#ctl00_ContentPlaceHolder1_Button1').click(function (e) {
        alert('hello');
    });

But only the first time click on the button, I got alert('hello'), and no more alert messages afterwards.

score 2 · Accepted Answer · answered Aug 06 '10 at 15:16

2

For dynamic content, use jQuery's .live() method.

$('#ctl00_ContentPlaceHolder1_Button1').live('click', function (e) {
    alert('hello');
});

Also, I'd recommend using a class instead of the ID. Using the ID is fragile to any code changes which affect the ASP.NET container/control structure:

<asp:Button ID="Button1" runat="server" Text="Button" class="performsMyClickAction" />

$('.performsMyClickAction').live('click', function (e) { ... }

answered Aug 06 '10 at 15:16

fearofawhackplanet

52,166
53
160
253

1

Thank you because I am using several divs with the same class css and I need to do some events for a certain div therefore I am calling the div using its ID. Thanks for your advise as well! – olidev Aug 10 '10 at 08:22
Instead of overusing the `class` attribute in WebForms projects I use the End-Of selector to only account for the ending of the ID. In this case the selector would be: `$('input[id$=Button1]').live()`, where the dollar-equals combination matches the End-Of of the attribute `id`. This way it will disregard the annoying long prefix. – timmi4sa Jul 24 '13 at 08:12
I get an error with that and shows the following error: `0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method`. My question: http://stackoverflow.com/questions/25431269/why-a-button-inside-an-updatepanel-doesnt-execute-a-jquery-event-after-the-firs – SearchForKnowledge Aug 21 '14 at 16:24

score 0 · Answer 2 · answered Aug 06 '10 at 15:05

0

I'm wondering why you have your selector as #ct_100_ContenPlaceHolder1_Button1. I switched it to #Button1 and it appeared to work fine for me.

answered Aug 06 '10 at 15:05

JasCav

34,458
20
113
170

Because you did not place it inside of a PLaceHolder. It works fine for the first time, but second time, it did not fire :( – olidev Aug 06 '10 at 15:11

score 0 · Answer 3 · answered Aug 06 '10 at 15:06

0

When the UpdatePanel does its asynchronous callback, you lose your jquery event registration, because the contents of the panel get completely replaced.

You can execute more JavaScript to re-wire things up by adding a script registration to the script manager during your callback. Something like this should get you close (in your button's server-side click handler):

ScriptManager.RegisterStartupScript(
    this,
    GetType(),
    "AnyStringYouWant",
    "$('#ctl00_ContentPlaceHolder1_Button1').click(function (e) {alert('hello');});",
    true);

answered Aug 06 '10 at 15:06

kbrimington

25,142
5
62
74

it sounds interesting! Could you please let me know where should I place it? – olidev Aug 06 '10 at 15:12
It looks like you have your answer already, but in response to your comment, you could use this code in your code-behind, probably anywhere before the Render stage of the page lifecycle. OnLoad should be fine. – kbrimington Aug 06 '10 at 15:27
Yes, that works fine as well but I prefer to use 'live' as the answer above in jQuery. It works super! Thanks! – olidev Aug 10 '10 at 08:22
How would I solve it in my case: http://stackoverflow.com/questions/25431269/why-a-button-inside-an-updatepanel-doesnt-execute-a-jquery-event-after-the-firs – SearchForKnowledge Aug 21 '14 at 16:27

Second time click of a button inside updatePanel, the event does not fire in jQuery

3 Answers3