title: jQuery trigger to fire a method when a <li> is added to <ul>
body: <p>I have a PHP page that uses <code>flush()</code> and <code>ob_flush()</code> to output progress to a browser. The page is outputting a styled <code>&lt;ul class="progresslog"&gt;</code> where individual <code>&lt;li class="{success|warning|error}"&gt;</code> elements are being flushed to the browser. </p>
  
  <p>I would like anything successful to be hidden, but anything with errors to show. At the moment, any errors are being "lost" in successful progress notifications. This is easily achieved with different classes on the <code>&lt;li&gt;</code> and some jQuery <code>.slideUp()</code> and <code>.slideDown()</code> methods to display the successes should the user wish to see them.</p>
  
  <p>However, assuming successful progress, nothing will be displayed to the user, concerning them about whether there is any progress or not. I would like a summary link text to update as additional <code>&lt;li&gt;</code>'s are added to the list to show something along the lines of <code>22 success notifications</code>. I would like this number to climb as output is received.</p>
  
  <p>I have code to update the text contained in an <code>&lt;a id="progresslogtoggle"&gt;</code> element. It looks like this:</p>
  
  <pre><code>function updateProgress()
  {
      var count = $('.progresslog .success').length;
      var warnings = $('.progresslog .warning').length;
      var errors = $('.progresslog .error').length;
      if (count &gt; 0)
      {
          $('#progresslogtoggle').html ('Show ' + count + ' success notice' + (count != 1 ? 's' : '') + '. (' + warnings + ' warning' + (warnings != 1 ? 's' : '') + ' and ' + errors + ' error' + (errors != 1 ? 's' : '') + ' already shown)');
      }
      else
      {
          $('#progresslogtoggle').html ('There are no success notices to show! (' + warnings + ' warning' + (warnings != 1 ? 's' : '') + ' and ' + errors + ' error' + (errors != 1 ? 's' : '') + ' already shown)');
      }
  }
  </code></pre>
  
  <p>Currently, once the list is finished and the final <code>&lt;/ul&gt;</code> is added, I also add a JavaScript snippet to call this <code>updateProgress()</code> function.</p>
  
  <p>However, I would like to have the link updated as items are added to the list. I have tried:</p>
  
  <pre><code>$('.progresslog').on ('change', updateProgress());
  </code></pre>
  
  <p>but it does not seem to register adding children to the list as changing it.</p>
  
  <p>How can I solve this problem?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>PHP code (greatly simplified, but enough to illustrate the point):</p>
  
  <pre><code>echo "&lt;a href=\"javascript:void(0);\" id=\"progresslogtoggle\"&gt;Please wait...&lt;/a&gt;&lt;/p&gt;";
  echo '&lt;ul class="progresslog"&gt;';
  // JS, as above, goes here, including an initial call to the function.
  for ($i = 0; $i &lt; 1000; $i ++)
  {
      // some lengthy process that takes time
      sleep (1); // NOT REAL CODE!
  
      echo '&lt;li class="';
      echo ($i % 5 == 0) ? 'warning' : 'success';
      echo '"&gt;Notice ' . $i . '&lt;/li&gt;';
      flush ();
      @ob_flush ();
  }
  echo "&lt;/ul&gt;";
  echo "&lt;script type=\"text/javascript\"&gt;updateProgress();&lt;/script&gt;";
  </code></pre>
  
  <p><em><strong>Disclaimer:</strong> I realise that working with an incomplete DOM is bad, I don't wish to necessarily debate that issue here.</em></p>