UpdatePanel 中元素上的 jQuery 事件

发布于 2024-08-19 15:47:06 字数 835 浏览 1 评论 0原文

我在 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>

我正在尝试将其连接起来，以便在单击 clickableImage IMG 时显示specialMessage SPAN，如下所示：

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

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

但是，由于 MyPanel 在页面加载时通常不可见（但稍后根据用户交互可能会可见），事件没有连接起来。有没有一种方法可以连接这些事件，即使 MyPanel 在初始页面加载时不可见？

原文

I have some elements inside an UpdatePanel which may or may be displayed, depending on various conditions.

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

I'm trying to wire it up so that the specialMessage SPAN is shown when the clickableImage IMG is clicked with the following:

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

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

However, since MyPanel is often not visible when the page loads (but it may be visible later based on user interaction), the events aren't hooked up. Is there a way that I can hook up these events even if MyPanel is not visible on the initial page load?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美胚控场 2024-08-26 15:47:06

使用 $.live() 方法附加动态添加元素的逻辑。

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

这将适用于所有当前的 #clickableImage 实例以及所有未来的实例。

Use the $.live() method to attach the logic for dynamically-added elements.

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

This will apply to all present instances of #clickableImage as well as all future instances too.

回复收藏 0 原文

忆梦 2024-08-26 15:47:06

        <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 中创建的元素。

所以，你只要把
<代码>

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

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


 <代码>});

});

in the code at some point outside the update panel.

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

Will re-bind your events to elements created in an UpdatePanel.

So, you just put

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

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

});

});



in the code at some point outside the update panel.

回复收藏 0 原文

~没有更多了~