Skip to main content

Binding and Unbinding Events in Real Time

By Blog

You will often come across a situation where you are setting up some kind of event that is dependent on the document or window for interaction. Typically we don’t want to setup too many event handlers here as they tend to collide with one another, not to mention we don’t need events there constantly running in the background. The quick and usual solution I see is to just wrap some kind of if statement around the event.

$(document).click(function () {
  if (popupShowing) {
    popup.close();
  }
});

This is all fine and good and probably what your code looks like. But what if we were to register this on multiple elements. We will have a bunch of these if statements running on every click. The solution for situations like these is to load and unload the event on the fly.

So in you’re plugin you will have some code that performs some action like opening a modal or popup. In this opening event we would create the “close” handler.

  show: function () {
    // Some code to position and show popup
    
    // Create close/hide handler in real time.
    $(document).bind('wPopup.click', hide);
  }

  hide: function () {
    this.popup.hide();
    $(document).unbind('wPopup.click');
  }

In the above example we will see or bind and unbind events for the document object. All we do is name the events so that when we hide the popup we unbind the event from the document and keep it clear from listeners.

The document is the easiest example but you will come across these situations often so it’s a good thing to be aware of to avoid polluting your elements with too many events.

Testing Plugins for HTML Features

By Blog

When we’re building our plugins we’ll often want to test if certain features are supported by a particular browser. There are some scripts out there that will help you with this, however it’s probably not best to make a small simple plugin dependent on such libraries. It’s better we just check for features that are specific to our jQuery plugin. Read More

jQuery Plugin Development Boilerplate

By Blog

When creating a jQuery plugin it’s nice to have a starting point to work from. A boilerplate serves as a nice small piece of code that you can pop in, allowing you to start working on your plugin right away. It also servers as a solid foundation to build your jQuery plugin off of knowing that the code is more stable. Read More