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?
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.
<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.
精彩评论