Jimmy Z

I’m working on a web application outside of my FamilySearch work that requires a lot of AJAX behavior. I have been using Prototype with Rails’ Prototype Helpers, but this is beginning to become a unwieldy.

The content I load can get very large with TONS of inline JavaScript, so in an effort to trim down the html and improve performance, I’m beginning to use Unobtrusive JavaScript methods. While I do this, I’m also doing a migration to jQuery.

I had seen a lot of code examples that looked like this:

jQuery(function($) {
  $('a.sidenote').click(function() {
    var href = $(this).attr('href');
    window.open(href, 'popup',
      'height=500,width=400,toolbar=no');
    return false;
  });
});

This seemed to work for event listening on elements that were loaded as the page loads, but I have lots of content that is loaded via AJAX methods after the document loads. I needed something that would bind the listeners not only at the time the document loaded, but would continue to bind event listeners to new content that matched the given selectors.

I later discovered the “live” method. This does exactly what I want it to do. Instead of just registering a click, I call live, so the above example would change to:

jQuery(function($) {
  $('a.sidenote').live('click',function() {
    var href = $(this).attr('href');
    window.open(href, 'popup',
      'height=500,width=400,toolbar=no');
    return false;
  });
});

This doesn’t require a big change in code, but the approach is much more powerful and truly allows you to make your JavaScript unobtrusive.