События jQuery для элементов в UpdatePanel - PullRequest
Новая
       5

События jQuery для элементов в UpdatePanel

1 голос
/ 02 февраля 2010

У меня есть элементы внутри UpdatePanel, которые могут отображаться или отображаться в зависимости от различных условий. 

<asp:UpdatePanel ID="MyUpdatePanel" runat="server">
    <ContentTemplate>
        <asp:Panel ID="MyPanel" runat="server">
            <img id="clickableImage" src="/path/to/image.png" alt="Clickable Image" />
            <span id="specialMessage">You clicked on the image!</span>
        <asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

Я пытаюсь подключить его таким образом, чтобы при щелчке IMG clickableImage показывалось специальное сообщение SPAN со следующим: 

$(document).ready(function() {
    $("#clickableImage").click(function() {
        $("#specialMessage").show();
    });

    $("#specialMessage").draggable();
});

Однако, поскольку MyPanel часто не виден при загрузке страницы (но он может быть виден позже в зависимости от взаимодействия с пользователем), события не подключаются. Есть ли способ, которым я могу подключить эти события, даже если MyPanel не виден при начальной загрузке страницы?

Ответы [ 2 ]

6 голосов
/ 02 февраля 2010

Используйте метод $.live(), чтобы присоединить логику для динамически добавляемых элементов. 

$("#clickableImage").live("click", function() {
    $("#specialMessage").show();
});

Это будет применяться ко всем существующим экземплярам #clickableImage, а также ко всем будущим экземплярам.

1 голос
/ 02 февраля 2010 
        <script type="text/javascript">
            var prm = Sys.WebForms.PageRequestManager.getInstance();

            prm.add_endRequest(function() {
                bindPageEvents(); /// insert bind function here! [I have it as an actual function() to avoid writing it out twice when I use this method]
            });
        </script>

Перепривязывает ваши события к элементам, созданным в UpdatePanel.

Итак, вы просто положили <pre> function bindPageEvents(){ $(document).ready(function() { $("#clickableImage").click(function() { $("#specialMessage").show(); });</p> <pre><code>$("#specialMessage").draggable();

}); }); в коде в какой-то момент за пределами панели обновления.

...