jQuery $ (document) .ready 및 UpdatePanels

질문 : jQuery $ (document) .ready 및 UpdatePanels?

---

jQuery를 사용하여 UpdatePanel 내부의 요소에 마우스 오버 효과를 연결하고 있습니다. 이벤트는 $(document).ready 바인딩됩니다. 예를 들면 :

$(function() {    
    $('div._Foo').bind("mouseover", function(e) {
        // Do something exciting
    });    
});

물론 이것은 페이지가 처음로드 될 때 잘 작동하지만 UpdatePanel이 부분 페이지 업데이트를 수행하면 실행되지 않고 마우스 오버 효과가 UpdatePanel 내에서 더 이상 작동하지 않습니다.

첫 번째 페이지로드뿐만 아니라 UpdatePanel이 부분 페이지 업데이트를 실행할 때마다 jQuery에서 항목을 연결하는 데 권장되는 방법은 무엇입니까? $(document).ready 대신 ASP.NET ajax 수명주기를 사용해야합니까?

답변

---

UpdatePanel은 업데이트시 업데이트 패널의 내용을 완전히 대체합니다. 즉, 구독 한 이벤트는 해당 업데이트 패널에 새 요소가 있기 때문에 더 이상 구독되지 않습니다.

이 문제를 해결하기 위해 제가 한 일은 모든 업데이트 후에 필요한 이벤트를 다시 구독하는 것입니다. $(document).ready() 를 사용한 다음 Microsoft의 PageRequestManager (페이지에 업데이트 패널이있는 경우 사용 가능)를 사용하여 모든 업데이트를 다시 구독합니다.

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

PageRequestManager 는 페이지에 업데이트 패널이있는 경우 자동으로 사용할 수있는 자바 스크립트 개체입니다. UpdatePanel이 페이지에있는 한이를 사용하기 위해 위의 코드 외에 다른 작업을 수행 할 필요가 없습니다.

더 자세한 제어가 필요한 경우이 이벤트는 .NET 이벤트가 인수 (sender, eventArgs) 전달하는 방식과 유사한 인수를 전달하므로 이벤트를 발생시킨 항목을 확인하고 필요한 경우에만 다시 바인딩 할 수 있습니다.

다음은 Microsoft 문서의 최신 버전입니다. msdn.microsoft.com/.../bb383810.aspx

필요에 따라 더 나은 옵션은 jQuery의 .on() 을 사용하는 것입니다. 이 방법은 모든 업데이트에서 DOM 요소를 다시 구독하는 것보다 효율적입니다. 그러나이 접근 방식을 사용하기 전에 모든 문서를 읽으십시오. 필요에 맞을 수도 있고 그렇지 않을 수도 있습니다. .delegate() 또는 .on() 을 사용하기 위해 리팩토링하기에는 불합리한 jQuery 플러그인이 많이 있으므로 이러한 경우 재 구독하는 것이 좋습니다.

출처 : https://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels