jquery: Uncaught TypeError: $(...).error is not a function

Question

I am using jquery on my page and don't have problem with other parts. Even $.post and $.get are working fine.

Now I am trying to evaluate if an image has any problems and tried this code:

$("#bib").error(function(){
   //nothing now 
});

I am wondering why I get this error:

Uncaught TypeError: $(...).error is not a function
at app.js:53
(anonymous) @ app.js:53

As you see I have shortened the code to isolate the problem but you get the whole idea. At the moment these jquery sources are included inside the page:

https://code.jquery.com/jquery-3.1.0.min.js https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

Any idea why this happens?

Answer 1

Use this instead (as stated earlier, .error has been removed).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

$("#bib").on('error', function(){
   //nothing now 
});

</script>

Answer 2

From the jquery upgrade guide at: https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

Breaking change: .load(), .unload(), and .error() removed

These methods are shortcuts for event operations, but had several API limitations. The event .load() method conflicted with the ajax .load() method. The .error() method could not be used with window.onerror because of the way the DOM method is defined. If you need to attach events by these names, use the .on() method, e.g. change $("img").load(fn) to $("img").on("load", fn).