AJAX and Events

Suppose we wanted to highlight all the <h3> elements on the page when they are clicked. By now the code to perform such a task is almost second-nature:

$(document).ready(function() {
  $('h3').click(function() {
    $(this).toggleClass('highlighted');
  });
});

All is well, in that clicking on the letters on the left side of the page highlights them. But the dictionary terms are also <h3> elements, and they do not get the highlight. Why?

The dictionary terms are not yet part of the DOM when the page is loaded, so the event handlers are never bound. This is an example of a general issue with event handlers and AJAX calls: loaded elements must have their event handlers bound at the appropriate time.

A first pass at solving this problem is to factor the binding out into a function, and call that function both at the time when the document is ready and after the AJAX call:

$(document).ready(function() {
  var bindBehaviors = function() {
    $('h3').click(function() {...