title: jQuery AFTER click event
body: <p>I'm trying to modify a Jquery plugin to fix the bugs.</p>
  
  <p>Following are the codes how all associated together:</p>
  
  <pre><code>$('.' + settings.activeClass).live('click', function(){
      select(this);
      alert( $('#pg li.selected').height() );
      .......
  });
  
  function select(el){
  hideSelected(function(){
      $(el).addClass('selected').removeClass('active');
      $(el).animate(settings.selectedCSS, 'slow');
  
  });
  }
  </code></pre>
  
  <p>So, before the 'selected' class added, the height is about 116px</p>
  
  <pre><code>$(el).addClass('selected').removeClass('active');
  </code></pre>
  
  <p>after the 'selected' class added, the height is supposed to be about 378px 
  as displayed on the html page rendered, the height updated to 378px</p>
  
  <pre><code>alert( $('#pg li.selected').height() );
  </code></pre>
  
  <p>However, when I was trying to print the value of the height, it still captured the old value before the 'selected' class added.</p>
  
  <p>Here is the weird part where I added the alert box to print the value of the height after the 'selected' class added, it was supposed to grab the new value of the height but apparently it's not.</p>
  
  <p>So, I thought of a solution in mind, maybe JQuery has some sort of events for after click event ? or any alternative solution to this ?</p>