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

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 butto开发者_Python百科n, I got alert('hello'), and no more alert messages afterwards.

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

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.

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