second time click of a button inside updatePanel, the event does not fire in jquery

Question

Hi,

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 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'). no more alert messages afterwards. Any advices on this, please?

Thanks in advance.

Answer 1

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.

Answer 2

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

Answer 3

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) { ... }