При втором нажатии кнопки внутри 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

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

$('#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

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

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

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

Answer 3

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