off() से Events Unbind करना
In this page:
$(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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
function handler() { console.log("Clicked"); }
$("#btn").on("click", handler);
$("#btn").off("click", handler);
</script>
</body>
</html>सभी Click Handlers हटाना
सिर्फ एक event name के साथ off(click) call करना selected elements पर इस समय attach हर click handler हटा देता है, हर एक function चाहे जो भी हो।
उदाहरण: Remove All Click Handlers
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click", function() { console.log("Handler A"); });
$("#btn").on("click", function() { console.log("Handler B"); });
$("#btn").off("click");
</script>
</body>
</html>एक Named Handler हटाना
on() में इस्तेमाल की गई वही function reference off() के दूसरे argument के रूप में pass करना सिर्फ उस specific handler को हटाता है, उसी element पर किसी दूसरे click handler को untouched छोड़ते हुए।
उदाहरण: Remove One Named Handler
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
function handlerA() { console.log("A"); }
function handlerB() { console.log("B"); }
$("#btn").on("click", handlerA);
$("#btn").on("click", handlerB);
$("#btn").off("click", handlerA);
</script>
</body>
</html>Delegated Handler हटाना
जब original handler एक selector से delegated था, तो delegated handler को attach रहने देने के बजाय सही तरीके से हटाने के लिए off() को अपने दूसरे argument के रूप में वही selector चाहिए।
उदाहरण: Remove Delegated Handler
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item</li></ul>
<script>
function handler() { console.log("Item clicked"); }
$("#list").on("click", "li", handler);
$("#list").off("click", "li", handler);
</script>
</body>
</html>Namespaces इस्तेमाल करना
किसी event को namespace देना, जैसे on('click.myPlugin', fn), आपको बाद में off('.myPlugin') call करके उस namespace के तहत हर handler को एक साथ हटाने देता है, बिना code में कहीं और unrelated click handlers को गलती से हटाए।
उदाहरण: Use Namespaces
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click.myPlugin", function() { console.log("Namespaced handler"); });
$("#btn").on("click", function() { console.log("Regular handler"); });
$("#btn").off(".myPlugin");
</script>
</body>
</html>.off("click", function() {...})से एक anonymous handler हटाने की कोशिश करना, जो fail हो जाता है क्योंकि एक नया function attach किए गए function से अलग reference है।.off("click")call करना और गलती से उस element पर हर click handler हटा देना, दूसरे code या plugins द्वारा जोड़े गए handlers सहित।- किसी 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: