为列表、网格内的 JSF 页面上的所有图像添加 jQuery 错误处理答案

【问题标题】：Add jQuery error handling to all images on JSF pages inside lists, grids为列表、网格内的 JSF 页面上的所有图像添加 jQuery 错误处理
【发布时间】：2015-03-05 17:59:04
【问题描述】：

首先，有一点背景。我想要完成的是我的 JSF 应用程序的客户端错误处理程序，用于在图像无法加载时执行 something 的图像。这件事有点复杂，所以我会选择一个简单的例子，它做类似的事情，它将 src 属性重写为不同的图像。此外，我的图像存储在 Amazon S3 上，因此图像请求不会通过我的 JSF 应用程序中的过滤器，我希望保持这种方式。

实际上我想对应用程序范围内的所有图像执行此操作（带有一些修饰）：

$('img').error(function() {
  var newImage = 'somethingbasedofftheoriginalurl.jpg'; //pseudocode
  $(this).attr('src','newImage');
}

我遇到的问题是它不适用于动态列表或网格，例如 Primefaces DataGrid。它将为第一页上的图像添加错误处理程序，但在使用分页器时不会为后续页面添加错误处理程序。它显然只将处理程序附加到调用$('img') 时存在的元素。

重点：

有没有办法在我的 JSF 应用程序中为应用程序范围内的所有图像附加客户端通用错误处理程序？它不一定是专门的 jQuery，但在客户端是必需的，直到每个人都告诉我这是不可能的......此外，将这段代码放在尽可能少的地方也很重要.我不能将它添加到整个应用程序中的每个爆炸的 xhtml 页面中。

【问题讨论】：

你试过用.on("error", funtion(){});
@Juan：不适用于error，因为它不会冒泡到$(document)。

标签： javascript jquery jsf jsf-2 primefaces

【解决方案1】：

PrimeFaces 使用 ajax 进行分页。因此，您基本上需要做的就是在完成 PrimeFaces ajax 响应时重新执行该脚本，这可以通过自定义事件 pfAjaxComplete 观察到。

所以，总而言之，应该这样做：

$(document).on("pfAjaxComplete", function(event, xhr, options) {
    // Do the job here.
});

【讨论】：

目前为止我尝试过的所有情况都有效。谢谢，你是一个救生员。