Второй раз нажмите на кнопку внутри UpdatePanel, событие не срабатывает в JQuery

Question

В моем файле ASPX, у меня есть:

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

В моем файле JavaScript У меня есть:

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

Но только в первый раз нажмите кнопку, я получил alert('hello') и больше никаких предупреждающих сообщений.

Answer 1

Для динамического содержимого, используйте .live() метод JQuery в.

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

Кроме того, я бы рекомендовал использовать класс вместо идентификатора. Использование идентификатора является хрупким для любых изменений кода, которые влияют на структуру/структуру управления ASP.NET:

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

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

Answer 2

Мне интересно, почему у вас есть ваш селектор как # ct_100_ContenPlaceHolder1_Button1. Я переключил его на # Button1, и он, похоже, отлично работал для меня.

Answer 3

Когда UpdatePanel выполняет асинхронный обратный вызов, вы теряете регистрацию событий jquery, потому что содержимое панели полностью заменяется.

Вы можете выполнить больше JavaScript для повторной проводки, добавив регистрацию скрипта менеджеру сценариев во время обратного вызова. Что-то вроде этого вы должны получить близко (в стороне сервера обработчик щелчка вашей баттона):

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