Выбор элемента управления Asp.net с помощью jquery

Question

У меня небольшая проблема, когда я не могу выбрать идентификатор элемента управления пользователя с помощью jquery. Пользовательский элемент управления - это панель сообщений, которая появляется, когда происходит действие. Поэтому, когда страница загружается, эта панель сообщений не является частью страницы. Только когда пользователь взаимодействует со страницей, то есть добавляет изображение, которое панель сообщений показывает с сообщением.

Элементы управления страницей

<asp:Panel ID="pan_cntrls" runat="server">
   <asp:Button ID="btnAddNewImg" runat="server" Text="Add new image" OnClick="btnAddNewImg_Click"
       Visible="true" />
   <uc9:MessagePanel ID="messagepanel1" runat="server"></uc9:MessagePanel>
</asp:Panel>

Javascript

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#PageContent_IMG1_messagepanel1_divMessageBox").click(function () {
            alert("handler called");
        });
   });

Что показывает firebug

<div class="errorBox confirmation" id="PageContent_IMG1_messagepanel1_divMessageBox" style="height: 50px;">

Я могу выбрать другие идентификаторы, используя jquery, но не этот. Я должен также указать, что я использую модалпопупексендер на странице. Поэтому, когда я отправляю данные, страница выполняет обратную передачу. Я попытался использовать делегат, потому что идентификатор добавляется в DOM после загрузки страницы, но он не работает.

Есть идеи?

Спасибо

Answer 1

По сути, проблема в том, что вы добавляете обработчик в $(document).ready.Div еще не существует, поэтому этот вызов ничего не делает.

Вам необходимо прикрепить обработчик щелчка после того, как div попадет на страницу.Это можно сделать несколькими способами:

1

Используйте add_endRequest, поэтому после асинхронных запросов выполните код document.ready:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    $("#PageContent_IMG1_messagepanel1_divMessageBox").click(function () {
        alert("handler called");
    });
});

или 2

Явно создайте функцию addHandler и вызовите ее, используя инъекцию из asp.net:

В JS:

function addHandler (ctrlID) {
    $("#" + ctrlID).click(function () {
        alert("handler called");
    });
};

В ASP.Net:

Используйте RegisterStartupScript для вызова addHandler, передавая ClientID элемента управления, который требует добавления обработчика.См. здесь для получения информации о RegisterStartupScript.

Первый из этих параметров менее эффективен, чем второй (так как он будет выполняться после всех обратных передач), но проще в реализации.

Answer 2

Чтобы получить идентификатор пользовательского элемента управления на стороне клиента, вы должны установить его свойство ClientID.

Answer 3

Можете ли вы попробовать это

    <script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#<%=PageContent_IMG1_messagepanel1_divMessageBox.ClientID%>").click(function () {
            alert("handler called");
        });
   });

таким образом, вы будете уверены, что это идентификатор на стороне клиента

Когда ASP.NET отображает серверные элементы управления, он дает им уникальные идентификаторы клиентов, которые отличаются от их идентификаторов серверов, и если вы не уверены, вы можете проверить источник своей страницы ASP.NET