jQuery .error() Method

What Is .error()?

.error() was jQuery’s legacy shorthand (1.0–2.x) for binding or triggering the browser error event on elements such as images. It was deprecated in 1.8 and removed in jQuery 3.0. Modern code uses .on("error") / .trigger("error").

// Removed in jQuery 3.0 (worked in 1.x / 2.x)
$("#book").error(function () {
  // resource failed to load
}).attr("src", "missing.png");

// Modern replacements
$("#book").on("error", handler);   // bind
$("#book").trigger("error");       // fire

// Attach BEFORE setting src — or you may miss the event

How to Use .error()

Recognize the legacy API in old code, then migrate to .on() / .trigger().

1. Bind with .error(handler) (legacy) or .on("error", handler) (preferred).
2. Attach the handler before setting src (or another resource URL).
3. Optionally pass eventData: .error(data, handler) → .on("error", data, handler).
4. Trigger with no-arg .error() (legacy) or .trigger("error") (preferred).
5. Never attach jQuery error handlers to window for script errors.

Pseudocode

// Legacy (jQuery 1.x / 2.x only)
call element.error(handler)
    → bind "error" on element

call element.error()
    → trigger "error" on element

// Modern (jQuery 1.7+)
call element.on("error", handler)
set element.src = url
when browser fails to load url:
    fire "error" on element
    call handler(event)

to migrate:
    .error(fn)     → .on("error", fn)
    .error(data, fn) → .on("error", data, fn)
    .error()       → .trigger("error")

Cheat Sheet

Quick map from the removed shorthand to modern APIs.

Live Preview

This page loads jQuery 3.x, so .error() is gone. The demo uses the modern equivalent .on("error").

Ready — pick an action and click Run.

jQuery Examples

Legacy snippets show the removed API (jQuery 1.x/2.x). Prefer .on("error") for new projects.

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

Image URL fails → error fires
#out shows "Handler for error called."
(Needs jQuery 1.x/2.x — removed in 3.0)

$("#avatar").error({ label: "avatar" }, function (event) {
  $("#out").text("Failed: " + event.data.label);
  $(this).attr("src", "fallback.png");
});

Broken avatar URL → error fires
event.data.label → "avatar"
Image src swapped to fallback

$("#book").error(function () {
  $("#out").text("Handler for error called.");
});

$("#other").on("click", function () {
  $("#book").error(); // legacy trigger — use .trigger("error")
});

Click #other → .error() fires the event
Bound handler runs without a real network failure

// Legacy — removed in jQuery 3.0
// $("#book").error(fn).attr("src", "missing.png");

// Modern — use for new code
$("#book")
  .on("error", function () {
    $("#out").text("Modern .on('error') handler ran.");
  })
  .attr("src", "missing.png");

jQuery 3.x → $.fn.error is undefined
.on("error") still works
Same attach-before-src rule applies

$("img.thumb")
  .error(function () {
    $(this).attr("src", "fallback.png");
  })
  .attr("src", "missing.png");

Each broken thumb fires error
Handler swaps src to fallback.png
Fallback must exist — or you loop forever

Performance Notes

Bind handlers directly on the elements that load resources. Keep the callback light — swap src or show a label, then stop.

Key Takeaways