jQuery事件冒泡错误的对象

时间:2014-11-28 20:30:33

标签: javascript jquery updatepanel jquery-events

我对jQuery事件仍然有点新鲜。

我试图编写jQuery Asp.NET UpdatePanel的包装器/框架,它自动跟踪UpdatePanel异步更新。

我希望能够做一些像

这样的事情
$("#myUpdatePanel").on("update", myFunc);

让它运行一些带有this的处理程序作为更新的UpdatePanel。我实际上有点工作。

我还希望能够在一次或多次UpdatePanel更新时准确运行一次函数。

$.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"));正在运行。

任何想法为什么以及如何解决它?

1 个答案:

答案 0 :(得分:0)

我弄清楚出了什么问题。

而不是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());
})();