jQuery Event Bubbling on wrong object

Question

I'm still a little new to jQuery events.

I'm trying to write jQuery a wrapper/framework of the Asp.NET UpdatePanel that automatically tracks UpdatePanel async updates.

I want to be able to do something like

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

and have it run some handler with this as the updated UpdatePanel. I actually have this bit working.

I also want to be able run a function exactly once any time one or many UpdatePanels update.

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

This is where I'm having issues.

I've defined my wrapper:

// 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);
})();

Then in my code that uses $.updatePanel:

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

What I'm finding is that myRunOnceFunc is being run during both $(this).trigger($.Event("update")); and $(UpdatePanel).trigger($.Event("update"));.

Any ideas why and how to fix it?

dx_over_dt dx_over_dt · Accepted Answer · 2014-11-28T22:02:54

I figured out what was wrong.

Rather than return $(UpdatePanel);, I needed to call return $(new UpdatePanel());. Then I needed to replace $(UpdatePanel).trigger(...) with $.updatePanel.trigger(...). Code below:

// 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());
})();

jQuery Event Bubbling on wrong object

1 Answers