如何在 PrimeFaces 中的 CommandButton 上定义带有闭包的 oncomplete 事件？

我正在使用一些 JavaScript 交互性扩展 PrimeFaces 应用程序的一部分。一切都始于CommandButton它从 bean 获取一些数据并调用 JavaScript。目前，它看起来像这样：

<p:commandButton actionListener="#{myBean.doSomething}"
                                 oncomplete="doSomethingSimple()"
                                 value="Do something" />

当然，这是非常简单的基于函数的编程。没有上下文，没有闭包，没有面向对象编程（如果我需要的话）。我想将一个普通的 JavaScript 事件附加到CommandButton，例如像这样使用 jQuery：

$('.myCommandButton').on('complete', function () {
     ...
})

然而，complete不是 DOM 事件，基本上只有 PrimeFaces 知道何时调用它。是否还有一种方法可以用“正常”JavaScript 事件处理来替换基于属性的脚本？

PrimeFaces 在幕后使用 jQuery 来处理 ajax 请求。所以，可以直接挂在通用的$.ajaxComplete() http://api.jquery.com/ajaxComplete/处理程序。来源可作为第三个参数的属性options:

$(document).ajaxComplete(function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

或者，如果您使用的是 PrimeFaces 4.0 或更高版本，请挂钩特定于 PrimeFaces 的pfAjaxComplete event:

$(document).on("pfAjaxComplete", function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

或者，如果您将 PrimeFaces 与“普通”HTML/jQuery 混合并希望同时应用于两者：

$(document).on("ajaxComplete pfAjaxComplete", function(event, xhr, options) {
    var $source = $("[id='" + options.source + "']");

    if ($source.hasClass("myCommandButton")) {
        // ...
    }
});

无论采用何种方式，$source因此表示触发 ajax 操作的原始 HTML DOM 元素的 jQuery 对象，在此特定示例中<p:commandButton>本身。这使您可以通过例如将其进一步委托给所需的处理程序。检查元素的类。