UpdatePanel 中元素上的 jQuery 事件答案

【问题标题】：jQuery Events on Elements in an UpdatePanelUpdatePanel 中元素上的 jQuery 事件
【发布时间】：2010-02-02 14:45:15
【问题描述】：

我在 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 在初始页面加载时不可见，是否有办法连接这些事件？

【问题讨论】：

标签： jquery asp.net-ajax updatepanel

【解决方案1】：

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

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

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

【讨论】：

在 .ready() 中使用 live() 可以吗？如果我想让 specialMessage SPAN 使用 ui.draggable？
是的。如果事实上它是使用它的理想场所:-)
确实不太理想。见stackoverflow.com/questions/2024018/…

【解决方案2】：

        <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();

}); }); 在更新面板外的某个位置的代码中。

【讨论】：