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