jQuery 이벤트 잘못된 객체에 버블 링

Question

jQuery 이벤트에 아직 조금 익숙합니다.

저는 UpdatePanel 비동기 업데이트를 자동으로 추적하는 Asp.NET UpdatePanel의 래퍼/프레임 워크를 jQuery로 작성하려고합니다.

나는

$("#myUpdatePanel").on("update", myFunc); 

같은 것을 할 수 있기를 원하고이 업데이트 된 UpdatePanel로 this 일부 핸들러를 실행합니다. 사실이 비트가 작동합니다.

하나 이상의 UpdatePanels가 업데이트 될 때마다 한 번 정확하게 함수를 실행할 수 있기를 원합니다.

$.updatePanel.on("update", myRunOnceFunc); 

여기는 내가 문제가있는 곳입니다.

// wrap updatePanel reload functionality 
$.updatePanel = (function() { 
    var prm; 

    var UpdatePanel = function() { }; 
    UpdatePanel.prototype = { }; 

    // initialize on $(document).ready() 
    $(function() { 
     prm = Sys.WebForms.PageRequestManager.getInstance(); 
     if (prm) { 
      prm.add_pageLoaded(function (s, e) { 
       $.each(e.get_panelsUpdated(), function() { 
        // call panel-specific update event handlers 
        $(this).trigger($.Event("update")); 
       }); 

       // triggered once no matter how many panels were updated 
       $(UpdatePanel).trigger($.Event("update")); 
      }); 
     } 
    }); 

    return $(UpdatePanel); 
})(); 

그런 다음 내 코드에서 그 $.updatePanel 사용 :

내 래퍼를 정의한

$(function() { $.updatePanel.on("update", myRunOnceFunc); }); 

난 무엇을 발견은 myRunOnceFunc가 $(this).trigger($.Event("update")); 및 $(UpdatePanel).trigger($.Event("update")); 모두에 실행되고있는 것입니다.

아이디어를 수정하는 이유는 무엇입니까?

Answer 1

나는 무엇이 잘못되었는지 알아 냈습니다.

return $(UpdatePanel);이 아니라 return $(new UpdatePanel());으로 전화해야했습니다. 그런 다음 $(UpdatePanel).trigger(...)을 $.updatePanel.trigger(...)으로 대체해야했습니다. 아래 코드 :

// wrap updatePanel reload functionality 
$.updatePanel = (function() { 
    var prm; 

    var UpdatePanel = function() { } 
    UpdatePanel.prototype = { }; 

    $(function() { 
     prm = Sys.WebForms.PageRequestManager.getInstance(); 
     if (prm) { 
      prm.add_pageLoaded(function (s, e) { 
       $.each(e.get_panelsUpdated(), function() { 
        $(this).trigger($.Event("update")); 
       }); 

       // triggered once no matter how many panels were updated 
       $.updatePanel.trigger($.Event("update")); 
      }); 
     } 
    }); 

    return $(new UpdatePanel()); 
})();