Master Controller

The buttons below control which section of the page below is "active".

• Colors
• Blog

This page uses active delegating and jQuery to establish delegating event handlers on a container. The event handling can be turned off or on by adding or removing a class on the container, rather than by removing/adding the handlers repeatedly.

$(document).ready(function() {
  $('#controller').on('click', '.liButton', function() {
    var $this = $(this);
    $this.addClass('current').siblings.removeClass('current');
    $('.section.active').removeClass('active');
    $($this.data('section')).addClass('active');
  });

  // only recognize events on descendants of a .active element
  $('#colors').on('click', '.active .liButton', colorHandler);
  $('#blog>ul').on('click', '.active>ul>li>h3', blogHandler);

  function colorHandler() {
    $('#colorSample')
      .css('backgroundColor', $.trim(this.innerHTML).toLowerCase());
  }
  function blogHandler() {
    alert(this.innerHTML);
  }

  $('.liButtonBar .liButton:first').click();
});

In the sections below, the absence of the "active" class produces a grey background to indicate that the section is inactive.

The buttons above control which section is currently active.

The selector passed to the $.fn.on method takes advantage of the fact that the context for the selector is the document root, in order to determine if the clicked element is within an active section.

See my blog at http://steveclaflin.blogspot.com/