HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one-time error handler</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 420px; }
    #avatar { width: 96px; height: 96px; border-radius: 50%; border: 3px solid #0ea5e9; display: block; margin-bottom: 12px; }
    #out { color: #0369a1; font-weight: 600; line-height: 1.5; }
  </style>
</head>
<body>
  <img id="avatar" alt="User avatar">
  <div id="out">Handler runs once, then unbinds.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var fallbackSvg = "data:image/svg+xml," + encodeURIComponent(
      '<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect fill="#e2e8f0" width="96" height="96"/><text x="48" y="54" text-anchor="middle" fill="#64748b" font-size="12" font-family="sans-serif">User</text></svg>'
    );
    $("#avatar")
      .one("error", function() {
        $(this).attr("src", fallbackSvg);
        $("#out").text("Broken URL detected → swapped to inline SVG fallback (handler removed).");
      })
      .attr("src", "https://httpstat.us/404");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery error event — one-time fallback (Try It)