Ajax 업데이트 후 jQuery에서 이벤트 리 바인딩 (업데이트 패널)

내 페이지에는 여러 입력 및 옵션 요소가 있으며, 각 요소는 변경되면 페이지의 일부 텍스트를 업데이트하는 이벤트가 첨부되어 있습니다. 정말 멋진 jQuery를 사용합니다. :)

또한 UpdatePanel을 사용하여 Microsoft의 Ajax 프레임 워크를 사용합니다. 내가 그렇게하는 이유는 특정 요소가 일부 서버 측 로직을 기반으로 페이지에 생성되기 때문입니다. 나는 UpdatePanel을 사용하는 이유를 설명하고 싶지 않습니다. 비록 그것이 jQuery 만을 사용하도록 재 작성 될 수 있더라도 여전히 UpdatePanel을 원합니다.

아마 짐작 하셨을 것입니다. 일단 UpdatePanel에 포스트 백이 있으면 jQuery 이벤트가 작동을 멈 춥니 다. "포스트 백"은 실제로 새로운 포스트 백이 아니므로 이벤트를 바인딩하는 document.ready의 코드가 다시 발생하지 않기 때문에 실제로 이것을 예상했습니다. 나는 또한 jQuery 도움말 라이브러리에서 그것을 읽어 내 의심을 확인했다.

어쨌든 UpdatePanel이 DOM 업데이트를 마친 후 컨트롤을 다시 바인딩하는 문제가 남아 있습니다. 페이지에 더 많은 .js 파일 (jQuery 플러그인)을 추가 할 필요가 없지만 모든 양식 요소를 리 바인딩하기 위해 메서드를 호출 할 수있는 UpdatePanel의 'afterupdating'을 잡을 수있는 것처럼 간단한 솔루션이 필요합니다. .

ASP.NET AJAX를 사용 pageLoad하고 있으므로 페이지가 다시 게시 될 때마다 호출 되는 이벤트 처리기에 액세스 할 수 있습니다.이 이벤트 처리기는 UpdatePanel의 전체 또는 일부에 관계없이 페이지가 다시 게시 될 때마다 호출됩니다. 페이지에 함수를 추가하기 만하면되며 연결이 필요하지 않습니다.

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

또는 on()메소드 를 통해 최신 jQuery의 라이브 기능을 확인할 수 있습니다 .

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

jQuery 1.7부터 권장되는 방법은 jQuery의 .on () 구문을 사용하는 것입니다.

그러나 DOM 개체 자체가 아니라 문서 개체 에 이벤트를 설정해야합니다 . 예를 들어, 이것은 UpdatePanel 포스트 백 후에 중단됩니다 .

$(':input').on('change', function() {...});

... ': inputs'가 다시 작성 되었기 때문입니다. 대신 다음을 수행하십시오.

$(document).on('change', ':input', function() {...});

문서가 주변에있는 한 모든 입력 (UpdatePanel 새로 고침의 입력 포함)은 변경 처리기를 트리거합니다.

다음 코드 사용

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

jQuery 및 이벤트 위임을 사용할 수 있습니다. 기본적으로 모든 요소가 아닌 컨테이너에 이벤트를 연결하고 event.target을 쿼리하고이를 기반으로 스크립트를 실행합니다.

코드 노이즈를 줄인다는 점에서 여러 가지 이점이 있습니다 (리 바인딩 할 필요 없음). 또한 브라우저 메모리에서 더 쉽습니다 (DOM에 바인딩 된 이벤트가 적음).

여기에 빠른 예 .

jQuery 플러그인쉬운 이벤트 위임을위한 .

추신 나는 다음 릴리스에서 위임이 jQuery 코어에있을 것이라고 99 % 확신합니다.

다음 코드를 사용합니다. 컨트롤이 데이터 선택기를 사용할 것인지 확인해야합니다.

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>

         <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

"if"에 업데이트 패널이 AsyncPostBack을 수행 할 때마다 실행해야하는 코드를 넣을 수 있습니다.

jQuery의 새로운 'live'메소드를 사용하여 이벤트를 바인딩하십시오. 이벤트를 현재의 모든 요소와 미래의 모든 요소에 바인딩합니다. 차칭! :)