Событие jQuery Bubbling на неправильном объекте

Question

Я все еще немного новичок в событиях jQuery.

Я пытаюсь написать jQuery оболочку/рамки Asp.NET UpdatePanel, которая автоматически отслеживает обновления async UpdatePanel.

Я хочу быть в состоянии сделать что-то вроде

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

и запустить его некоторый обработчик с this как обновленной UpdatePanel. У меня на самом деле этот бит работает.

Я также хочу иметь возможность запускать функцию ровно один раз в любое время, когда обновляется одно или несколько обновлений 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()); 
})();