在 jquery 中将 onerror 与动态创建的图像标签绑定答案

【问题标题】：bind onerror with dynamically created image tag in jquery在 jquery 中将 onerror 与动态创建的图像标签绑定
【发布时间】：2016-07-29 11:09:32
【问题描述】：

我正在尝试将 img 的 onerror 与函数绑定。在 jquery 中图像标签是这样创建的

this._img1 = $("<img>");

这是函数

function imgError(image) {
  image.onerror = "";
  image.src = '/Content/img/placeholder-profile.jpg';
  return true;
}

现在我想将此函数与 onerror 绑定... 我已经尝试过以下事情，但它们对我不起作用

this._img1.on("onError", "imgError(" + this._img1 + ")");

和

this._img1.prop("onError", "imgError(this)");

和

this._img1.error(function () {
    _img1.src = '/Content/img/placeholder-profile.jpg';
});

谁能建议我如何实现它？

【问题讨论】：

什么是this._img1？我猜它是一个 DOM 节点元素，而不是 jq 对象。所以你必须将它包装在 jq 对象中才能使用 jq 方法：$(this._img1).on('error', function(){_img1.src = '/Content/img/placeholder-profile.jpg';});。或者使用原生js方法绑定事件
@A. Wolff 'this' 是主要的 div 元素，所有其他元素都包含在其中，并且我们在其中显示结果。它实际上是 jquery 小部件调用。

【解决方案1】：

好吧，就我自己而言，我只是为onError 事件注册了一个全局监听器，如下所示：

$("img").on('error', function() {
  $(this).attr("src", "/path/to/my/default/placeholder-image.png");
});

这解决了所有损坏的图像链接。在您的情况下，您可以使用/同时使用#id 和/或.class 选择器来缩小到特定元素。

jquery .on() 函数也适用于动态创建的元素。查看示例here

【讨论】：

【解决方案2】：

你可以简单地使用 jquery 的 .error() 来实现这个功能。将事件处理程序绑定到“错误”JavaScript 事件。

Type: Function( Event eventObject )

触发事件时执行的函数。

错误事件被发送到由文档引用并由浏览器加载的元素，例如图像。如果元素未正确加载，则调用它。

例如，考虑一个带有简单图像元素的页面：

<img alt="Book" id="book">

事件处理程序可以绑定到图像：

$( "#book" )
  .error(function() {
    alert( "Handler for .error() called." )
  })
  .attr( "src", "missing.png" );

如果图像无法加载（例如，因为它不在提供的 URL 中），则会显示警报：

.error() 的处理程序被调用。

【讨论】：