{"id":10630,"date":"2013-08-27T16:52:47","date_gmt":"2013-08-27T11:22:47","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=10630"},"modified":"2013-08-27T16:53:35","modified_gmt":"2013-08-27T11:23:35","slug":"jquery-unbinding-specific-event-with-namespace","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/jquery-unbinding-specific-event-with-namespace\/","title":{"rendered":"jQuery: Unbinding specific event with namespace"},"content":{"rendered":"
If we follow the normal jQuery<\/strong> practices for binding and unbinding multiple jQuery<\/strong> events, it involves writing code again and again for each of the binding and unbinding which makes it very repetitive, specially when unbinding.<\/div>\n
<\/div>\n

Joint unbinding is also seen when you have same event bound to the same DOM<\/strong> element multiple times. Lets consider an example: You bind a click event on a button and your team mate also does the same. In this scenario if you unbind your click event using the jQuery<\/strong> .off method on the element, it will also unbind the event that your team mate bounded for some other purpose\/s. Same can be the case when you are using any jQuery<\/strong> plugin.<\/p>\n

<\/div>\n
To tackle this situation more cleanly and in an efficient manner, \u00a0jQuery<\/strong> provides us a concept of namespaces while binding or unbinding events to any DOM<\/strong> element.<\/div>\n
<\/div>\n

Things will get more clear with example below:<\/strong><\/p>\n

[js]
\n$("#updateStatus").on(‘click.myNamespace’, function () {
\n console.log("this click is initiated by myNamespace");
\n});<\/p>\n

$("#updateStatus").on(‘hover.myNamespace’, function () {
\n console.log("this hover is initiated by myNamespace");
\n});<\/p>\n

$("#updateStatus").on(‘click.myNamespace2’, function () {
\n console.log("this click is initiated by myNamespace2");
\n});<\/p>\n

$("#updateStatus").on(‘hover.myNamespace2’, function () {
\n console.log("this hover is initiated by myNamespace2");
\n});
\n[\/js]<\/p>\n

[js]
\n$("#updateStatus").off("hover.myNamespace") \/\/ unbind only single event(hover) bound by namespace<\/p>\n

$("#updateStatus").off(".myNamespace2") \/\/ unbind all events bound by namespace2
\n[\/js]<\/p>\n<\/div>\n

This allow us to unbind all of the events, previously bound under a single namespace. At the same time it also facilitates us to unbind specific events using same namespace pattern. This makes the code more clean, less repetitive and also solves the problem described in the example above.<\/p>\n

Hope it helps you! Cheers! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

If we follow the normal jQuery practices for binding and unbinding multiple jQuery events, it involves writing code again and again for each of the binding and unbinding which makes it very repetitive, specially when unbinding. Joint unbinding is also seen when you have same event bound to the same DOM element multiple times. Lets […]<\/p>\n","protected":false},"author":64,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0},"categories":[1],"tags":[1183,998,1181,55,27,1182,1184],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/10630"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=10630"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/10630\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=10630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=10630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=10630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}