HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>.off('ajaxError') cleanup</title>

  <style>

    body { font-family: sans-serif; padding: 16px; max-width: 540px; }

    button { margin-right: 8px; margin-bottom: 8px; padding: 8px 12px; cursor: pointer; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; }

    #fetch { background: #dc2626; color: #fff; border: none; }

    #remove { border-color: #f87171; }

    .log { margin-top: 14px; padding: 12px; background: #fef2f2; border-radius: 6px; font-size: 14px; line-height: 1.5; }

    .hint { color: #64748b; font-size: 13px; margin-top: 8px; }

  </style>

</head>

<body>

  <button type="button" id="fetch">Trigger 404 $.get()</button>

  <button type="button" id="remove">Remove handler (.off)</button>

  <div class="log">Handler active — ajaxError count: 0</div>

  <p class="hint">After Remove, the 404 still fails but the handler no longer runs.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    var count = 0;



    function onError() {

      count++;

      $(".log").text("Handler active — ajaxError count: " + count);

    }



    $(document).ajaxError(onError);



    $("#fetch").on("click", function() {

      $.get("https://httpbin.org/status/404");

    });



    $("#remove").on("click", function() {

      $(document).off("ajaxError", onError);

      $(".log").text("Handler removed with .off('ajaxError', fn). Trigger 404 — count stays " + count + ".");

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .off('ajaxError') — remove handler (Try It)