Cover by Alex MacCaw

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

$.Controller: The jQuery Plug-in Factory

JavaScriptMVC’s controllers are many things. They are a jQuery plug-in factory. They can be used as a traditional view, making pagination widgets and grid controls. They can also be used as a traditional controller, initializing controllers and hooking them up to models. Mostly, controllers are a really great way of organizing your application’s code.

Controllers provide a number of handy features, such as:

  • jQuery plug-in creation

  • Automatic binding

  • Default options

  • Automatic determinism

But the controller’s most important feature is not obvious to anyone but the most hardcore JS ninjas. The following code creates a tooltip-like widget that displays itself until the document is clicked:

$.fn.tooltip = function(){
  var el = this[0];

  $(document).click(function(ev){
    if (ev.target !== el)
      $(el).remove();
  });

  $(el).show();
  return this;
});

To use it, add the element to be displayed to the page, and then call tooltip on it:

$("<div class='tooltip'>Some Info</div>")
    .appendTo(document.body)
    .tooltip()

But this code has a problem. Can you spot it? Here’s a hint: what if your application is long-lived and lots of these tooltip elements are created?

The problem is that this code leaks memory! Every tooltip element, and any tooltip child elements, are kept in memory forever. This is because the click handler is not removed from the document, and it has a closure reference to the element.

This is a very easy mistake to make. jQuery removes all event handlers from elements ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required