.error inside .click function

Question

I'm doing some testing with working and broken images:

HTML:

<a href="#"><img src="http://asdf.com/working.jpg" /></a>
<a href="#"><img src="http://asdf.com/broken.jpg" /></a> <!-- non valid URL -->

jQuery:

$('a').click(function() {
    $(this).find('img').error(function() {
      alert('Image does not exist!');
    });
    return false;
});

This works to an extent... Basically I want it to alert ONLY if the user clicks on the broken image. What am I doing wrong?

The [error event](http://api.jquery.com/error/) might have already fired before you click the link? — Bergi, Aug 13 '14 at 22:45
http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript/1977898#1977898 — Musa, Aug 13 '14 at 23:22

krg · Answer 1 · 2014-08-13T22:57:43.243

0

I would bind to the image for error events, then add the alert logic if there was an error. Here's a working JSFiddle example I created.

$( "img" ).error(function() {
  $( this ).click(function() { 
    alert('Image does not exist!'); 
  });
});

edited Aug 13 '14 at 22:57

answered Aug 13 '14 at 22:49

krg

2,650
2
12
9

That still assumes that the handler is bound before the `error` event fires. Which afair can be even before DOMContentLoaded. – Bergi Aug 13 '14 at 23:01

score 0 · Answer 2 · edited May 23 '17 at 10:26

The error() method was deprecated in jQuery 1.8. So you should be using on('error',function(){}); instead. But, you still have the issue where the error handler has to be attached before the image load is attempted. So, you can set the img src after you attach the handler.

EDIT: It was bothering me that I didn't have a src in my img tag (invalid HTML), so I found this inspired stack overflow: What's the valid way to include an image with no src?. The src="//:0" is from there.

HTML:

<a href="#"><img data-src="http://placekitten.com/300/300" src="//:0" /></a>

<a href="#"><img data-src="http://asdf.com/broken.jpg" src="//:0" /></a> 
<!-- non valid URL -->

Javascript

$(document).ready(function () {
    $('img').on ('error', function () {
        $(this).data('error',true);
    }).each(function() {
        $(this).attr('src',$(this).data('src'));
    });
    $('a').click(function () {
        if($(this).find('img').data('error') == true) alert('Image does not exist!');
        return false;
    });
});

http://jsfiddle.net/10xjo3of/2/

score 0 · Answer 3 · answered Aug 13 '14 at 23:35

You could use onerror attribute for images. the following compatibility table lists the browsers that support the onerror attribute and you can see that you can use this without any issue: http://www.quirksmode.org/dom/events/error.html

Add onerror="$(this).addClass('error');" to images like this:

<a href="#"><img src="http://asdf.com/working.jpg" onerror="$(this).addClass('error');" /></a>
<a href="#"><img src="http://asdf.com/broken.jpg" onerror="$(this).addClass('error');" /></a> <!-- non valid URL -->

And on every click, check the error class:

$('a').click(function() {
    if ($(this).find('img').hasClass('error')){
        alert('Image does not exist!');
    }
});

JSFiddle Demo

.error inside .click function

3 Answers3