Search code examples
jqueryhtmlhtml-parsing

$.parseHTML().error() is not a function error when dynamically creating DOM elements

I'm creating img elements using $.parseHTML(), from a dynamic string so I need to check if the img was successfully created with the given src
ps: the image is hosted on the same server not an external link. 

<img id='lorem' src='someURL'>

I used .error() methode as I fould in this Question.
I got it to work as expecteced, by using this :

$('#lorem').error(function(){alert('img does not exist')})

then it doesn't work when I start using $.parseHTML() again
the console says $.parseHTML(...).error is not a function
so I use jQuery.type() to debug and I get an array ! wich is not expected because I created only one element.
and when I try to access only one by one memeber of the array it still doesn't work
any suggestions ? thanks in advance.

Solution

  • The issue is because $.parseHTML returns an array, which has no error method. You need to create an actual DOMElement before you can hook an error event handler to it.

    From the look of your code, $.parseHTML is redundant as you can just create the element normally, like this:

    $('<img src="invalidURL" />').error(function() {
    alert('img does not exist');
})

    Updated fiddle