Nowadays jQuery become a very standard library used in in 90% of all projects. Simplicity of DOM manipulation with cross browser capability attracts all developers, from newbies to profs.

While developing AJAX UI with many forms nested in each other I faced a problem of not well written code, what was a real pain to modify.

I am going to tell how jQuery events saved my ass.

jQuery events are very simple and easy to use, you should have known them like click, hover, submit, etc..

Usage is prety simple thu

$('#my_button').click(function() {
.. do cool stuff here..
});

But you probaby did not pay much attention to jQuery events documentation  chapter. There is a nice paragraph that says, event name can be any string and events can be triggered by user.

These two facts play important role in what I am going to achieve. See code below.

//Subscribe to event
$(document).bind('my.custom.event', function() {
... do cool stuff here...
});

// Trigger event
$(document).trigger('my.custom.event');

Usage scenario - AJAX UI

How did this save my ass? I have a complex user interface based on AJAX. That means user clicks on the button and it loads form. Problem is that form also has buttons, tabs and all these DOM elements have to binded to events.

In this case code lookgs ugly:

$('#button').click(function() {
   $.get('/product/edit_form/1', function(html) {
      $('#form #tab').tabs();
      ... 20 more lines of code here.

      $('#form #supplier').click(function() {
          $.get('/product/supplier_list/1', function(data) {
            ... 20 more lines of code here.
          });
      });
      $('#form #save').click(function() {
            ... 20 more lines of code here.
      });
   });
});

The more elements and nests levels you have, code looks heavier to modify and support.

I have rewritten same code using jQuery custom events, look here

$('#button').click(function() {
   $.get('/product/edit_form/1', function(html) {
      $(document).trigger('form.loaded')
   });
});

// Init widgets
$(document).bind('form.loaded', function() {
   $('#form #tab').tabs();
   ... more widgets
});

// Supplier function
$(document).bind('form.loaded', function() {
   $('#form #supplier').click(function() {
      $.get('/product/supplier_list/1', function(data) {
         $(document).trigger('supplier.loaded')
      });
   });
});

// Save code function
$(document).bind('form.loaded', function() {
   $('#form #save').click(function() {
      .. save code..
   });
});

// Display list of suppliers
$(document).bind('supplier.loaded', function() {
   ... some code...
});

Code become more flat and structured, much easier to support and add functionality. It is possible to add multiple event handlers and they all will be executed in that order.  It acts  like subscribing.

Using parameters in custom jQuery events

For dessert, nice feature that saves time and global variables. It is possible to pass variables when event is triggered and they will appear as arguments to invokig functions:

$(document).trigger('edit.loaded', [record_id, other_param]);
$(document).bind('edit.loaded', function(event, record_id, other_param) {
   alert('Record id='+record_id);
});