{"id":208,"date":"2023-08-25T17:22:26","date_gmt":"2023-08-25T17:22:26","guid":{"rendered":"\/\/api.jquery.com\/?p=208"},"modified":"2024-04-20T18:06:53","modified_gmt":"2024-04-20T18:06:53","slug":"error","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/error\/","title":{"rendered":"error event"},"content":{"rendered":"Bind an event handler to the \"error\" event, or trigger that event on an element.<div class=\"toc\">\n<h4><span>Contents:<\/span><\/h4>\n<ul class=\"toc-list\">\n<li>\n<a href=\"#on1\">.on( \"error\" [, eventData ], handler )<\/a><ul><li><a href=\"#on-%22error%22-eventData-handler\">.on( \"error\" [, eventData ], handler )<\/a><\/li><\/ul>\n<\/li>\n<li>\n<a href=\"#trigger2\">.trigger( \"error\" )<\/a><ul><li><a href=\"#trigger-%22error%22\">.trigger( \"error\" )<\/a><\/li><\/ul>\n<\/li>\n<\/ul>\n<\/div><article id=\"on1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.on( \"error\" [, eventData ], handler )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Bind an event handler to the \"error\" event.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.7\/\">1.7<\/a><\/span><a id=\"on-&quot;error&quot;-eventData-handler\" href=\"#on-%22error%22-eventData-handler\"><span class=\"icon-link\"><\/span>.on( \"error\" [, eventData ], handler )<\/a>\n<\/h4>\n<ul>\n<li id=\"on-&quot;error&quot;-eventData-handler-&quot;error&quot;\">\n<div><strong>\"error\"<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#string\">string<\/a>\n<\/div>\n<div>The string <code>\"error\"<\/code>.<\/div>\n<\/li>\n<li id=\"on-&quot;error&quot;-eventData-handler-eventData\">\n<div><strong>eventData<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Anything\">Anything<\/a>\n<\/div>\n<div>An object containing data that will be passed to the event handler.<\/div>\n<\/li>\n<li id=\"on-&quot;error&quot;-eventData-handler-handler\">\n<div><strong>handler<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>( <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a> eventObject )<\/div>\n<div>A function to execute each time the event is triggered.<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n    <div class=\"warning\">\n      <p>This page describes the <code>error<\/code> event. For the <code>.error()<\/code> method removed in jQuery 3.0, see <a href=\"\/error-shorthand\/\"><code>.error()<\/code><\/a>.<\/p>\n    <\/div>\n    <p>The <code>error<\/code> event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.<\/p>\n    <p>For example, consider a page with a simple image element:<\/p>\n    <div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Book\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"book\"<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>The event handler can be bound to the image:<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"#book\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"error\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    alert( <span class=\"hljs-string\">\"Handler for `error` called.\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .attr( <span class=\"hljs-string\">\"src\"<\/span>, <span class=\"hljs-string\">\"missing.png\"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:<\/p>\n    <p>\n      <samp>Handler for `error` called.<\/samp>\n    <\/p>\n    <div class=\"warning\">\n      <p>The event handler <em>must<\/em> be attached before the browser fires the <code>error<\/code> event, which is why the example sets the <code>src<\/code> attribute after attaching the handler. Also, the <code>error<\/code> event may not be correctly fired when the page is served locally; <code>error<\/code> relies on HTTP status codes and will generally not be triggered if the URL uses the <code>file:<\/code> protocol.<\/p>\n    <\/div>\n    <p>Note: A jQuery <code>error<\/code> event handler should not be attached to the <code>window<\/code> object. The browser fires the <code>window<\/code>'s <code>error<\/code> event when a script error occurs. However, the window <code>error<\/code> event receives different arguments and has different return value requirements than conventional event handlers. Use <code>window.onerror<\/code> instead.<\/p>\n  <\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>To replace all the missing images with another, you can update the <code>src<\/code> attribute inside the <code>error<\/code> handler. Be sure that the replacement image exists; otherwise the <code>error<\/code> event will be triggered indefinitely.<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ If missing.png is missing, it is replaced by replacement.png<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"img\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"error\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-built_in\">this<\/span> ).attr( <span class=\"hljs-string\">\"src\"<\/span>, <span class=\"hljs-string\">\"replacement.png\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .attr( <span class=\"hljs-string\">\"src\"<\/span>, <span class=\"hljs-string\">\"missing.png\"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>\n<\/div><\/article><article id=\"trigger2\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.trigger( \"error\" )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Trigger the \"error\" event on an element.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.0\/\">1.0<\/a><\/span><a id=\"trigger-&quot;error&quot;\" href=\"#trigger-%22error%22\"><span class=\"icon-link\"><\/span>.trigger( \"error\" )<\/a>\n<\/h4>\n<ul><li id=\"trigger-&quot;error&quot;-&quot;error&quot;\">\n<div><strong>\"error\"<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#string\">string<\/a>\n<\/div>\n<div>The string <code>\"error\"<\/code>.<\/div>\n<\/li><\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc-1\">\n    <p>See the description for <a href=\"#on1\"><code>.on( \"error\", ... )<\/code><\/a>.<\/p>\n  <\/div>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Bind an event handler to the &#8220;error&#8221; event, or trigger that event on an element.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,78,96],"tags":[],"class_list":["post-208","post","type-post","status-publish","format-standard","hentry","category-browser-events","category-78","category-96"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":2,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"predecessor-version":[{"id":807,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/208\/revisions\/807"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}