jQuery UpdatePanel의 요소에 대한 이벤트

Question

다양한 조건에 따라 UpdatePanel 내부에 일부 요소가 표시되거나 표시 될 수 있습니다. 나는 clickableImage IMG는 다음과 같이 클릭 할 때 specialMessage SPAN이 표시되도록 그것을 묶을려고

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

:

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

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

을 그러나 MyPanel 종종 볼 수 없습니다 때문에, 때 페이지 로드되지만 (나중에 사용자 상호 작용에 따라 표시 될 수 있음) 이벤트는 연결되지 않습니다. MyPanel이 초기 페이지로드에서 보이지 않더라도 이러한 이벤트를 연결할 수있는 방법이 있습니까?

Answer 1

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

}); }); 

을 넣어.

Answer 2

$.live() 메서드를 사용하면 동적으로 추가 된 요소에 대한 논리를 첨부 할 수 있습니다.

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

이 너무 #clickableImage의 모든 존재하는 경우뿐만 아니라 미래의 모든 인스턴스에 적용됩니다.