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

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

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

또한 업데이트 패널을 활용하여 Microsoft Ajax 프레임워크를 사용합니다.제가 그렇게 하는 이유는 특정 요소가 서버 측 논리를 기반으로 페이지에 생성되기 때문입니다.업데이트 패널을 사용하는 이유에 대해 설명하고 싶지 않습니다. jQuery만 사용하도록 다시 작성할 수 있더라도 업데이트 패널이 필요합니다.

아마 짐작하셨을 것입니다. 일단 업데이트 패널에 포스트백이 들어오면 jQuery 이벤트가 작동하지 않습니다."postback"은 실제로 새로운 포스트백이 아니기 때문에 이벤트를 바인딩하는 document.ready의 코드가 다시 실행되지 않을 것이기 때문에 저는 사실 이것을 예상했습니다.저는 또한 jQuery 도움말 라이브러리에서 그것에 대해 읽어봄으로써 저의 의심을 확인했습니다.

어쨌든 업데이트 패널이 DOM 업데이트를 완료한 후 컨트롤을 다시 바인딩해야 하는 문제가 남아 있습니다.페이지에 .js 파일(jQuery 플러그인)을 더 추가할 필요 없이 모든 양식 요소를 다시 바인딩하는 방법을 호출할 수 있는 UpdatePanel의 '업데이트 후'를 잡을 수 있는 간단한 솔루션이 필요합니다.

ASP.NET AJAX를 사용하고 있으므로 다음에 액세스할 수 있습니다.pageLoad페이지가 업데이트 패널에서 전체 또는 부분적으로 페이지를 게시할 때마다 호출되는 이벤트 핸들러입니다.당신은 당신의 페이지에 기능을 넣기만 하면 되며, 후킹은 필요하지 않습니다.

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

또는 메소드를 통해 최신 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() {...});

':dll'이(가) 다시 작성되었기 때문입니다.대신 이 작업을 수행합니다.

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

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

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

언급URL : https://stackoverflow.com/questions/301473/rebinding-events-in-jquery-after-ajax-update-updatepanel