← Back to jQuery Course | Chapter 3: Events | Lesson 10 of 11

off() से Events Unbind करना

off एक event handler हटाता है।

In this page:

  1. एक Handler हटाना
  2. सभी Click Handlers हटाना
  3. एक Named Handler हटाना
  4. Delegated Handler हटाना
  5. Namespaces इस्तेमाल करना
Syntax
javascript 
$(selector).off("eventName", handler);
$(selector).off("eventName");
$(selector).off();

एक Handler हटाना

किसी element पर off() call करना पहले attach किए गए handler को detach कर देता है ताकि यह उस event को respond करना बंद कर दे। यह on() ने पहले जो भी setup किया था उसे undo करने का standard cleanup method है।

उदाहरण: Remove a Handler

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="btn">Click</button>
    <button id="removeBtn">Remove Handler</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      function handler() { $("#output").text("Clicked!"); }
      $("#btn").on("click", handler);
      $("#removeBtn").on("click", function() {
        $("#btn").off("click", handler);
        $("#output").text("Handler removed");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

सभी Click Handlers हटाना

सिर्फ एक event name के साथ off(click) call करना selected elements पर इस समय attach हर click handler हटा देता है, हर एक function चाहे जो भी हो।

उदाहरण: Remove All Click Handlers

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="btn">Click</button>
    <button id="removeBtn">Remove Handler</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() { $("#output").append("Handler A fired. "); });
      $("#btn").on("click", function() { $("#output").append("Handler B fired. "); });
      $("#removeBtn").on("click", function() {
        $("#btn").off("click");
        $("#output").text("Both handlers removed");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

एक Named Handler हटाना

on() में इस्तेमाल की गई वही function reference off() के दूसरे argument के रूप में pass करना सिर्फ उस specific handler को हटाता है, उसी element पर किसी दूसरे click handler को untouched छोड़ते हुए।

उदाहरण: Remove One Named Handler

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="btn">Click</button>
    <button id="removeBtn">Remove Handler</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      function handlerA() { $("#output").append("A fired. "); }
      function handlerB() { $("#output").append("B fired. "); }
      $("#btn").on("click", handlerA);
      $("#btn").on("click", handlerB);
      $("#removeBtn").on("click", function() {
        $("#btn").off("click", handlerA);
        $("#output").text("Handler A removed (B still active)");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Delegated Handler हटाना

जब original handler एक selector से delegated था, तो delegated handler को attach रहने देने के बजाय सही तरीके से हटाने के लिए off() को अपने दूसरे argument के रूप में वही selector चाहिए।

उदाहरण: Remove Delegated Handler

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <ul id="list"><li>Item</li></ul>
    <button id="removeBtn">Remove Handler</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      function handler() { $("#output").text("Clicked!"); }
      $("#list").on("click", "li", handler);
      $("#removeBtn").on("click", function() {
        $("#list").off("click", "li", handler);
        $("#output").text("Handler removed");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Namespaces इस्तेमाल करना

किसी event को namespace देना, जैसे on('click.myPlugin', fn), आपको बाद में off('.myPlugin') call करके उस namespace के तहत हर handler को एक साथ हटाने देता है, बिना code में कहीं और unrelated click handlers को गलती से हटाए।

उदाहरण: Use Namespaces

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="btn">Click</button>
    <button id="removeBtn">Remove Handler</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click.myPlugin", function() { $("#output").append("Namespaced handler fired. "); });
      $("#btn").on("click", function() { $("#output").append("Regular handler fired. "); });
      $("#removeBtn").on("click", function() {
        $("#btn").off(".myPlugin");
        $("#output").text("Namespaced handler removed (regular still active)");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

Events को Programmatically Trigger करना · Window और Document Events · Form इवेंट्स · Keyboard इवेंट्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. .off("click", function() {...}) से एक anonymous handler हटाने की कोशिश करना, जो fail हो जाता है क्योंकि एक नया function attach किए गए function से अलग reference है।
  2. .off("click") call करना और गलती से उस element पर हर click handler हटा देना, दूसरे code या plugins द्वारा जोड़े गए handlers सहित।
  3. किसी delegated handler को child पर plain .off("click") से हटाना जब यह parent पर .on("click", "li", fn) से bind किया गया था, इसलिए यह attached रहता है।
🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson Event Binding with on() Next Lesson → Triggering Events Programmatically

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.