Unbinding events using jQuery

Recently, I was trying to use jQuery’s .Unbind() function to remove an onclick event handler that was was being bound elsewhere, out of my control. (Basically I wanted to suppress a “click to add a new item” link to force something to be read-only in a 3rd party app.) Frustratingly, I could not seem to get the Unbind() to take effect. I knew my selector was okay, because I could change the background-color of the item I was targeting without issue.

Eventually I googled it and found other people with the same problem. Turns out, jQuery only tracks event handlers that have been bound using jQuery. So, if the event handler was bound declaratively in the HTML markup (or output by some other system/framework), Unbind() won’t touch it (doesn’t know about it unless you used Bind() to add it).

The workaround solution is to use .removeAttr(eventname), such as .removeAttr(“onclick”). This worked for me and stopped me from banging my head on the wall any further. Hopefully it helps you, too.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.