title: Run jQuery Function on Page Load AND Every Time Certain Buttons Are Clicked
body: <p>I have a <code>ul</code> with multiple list items and am using jQuery to:</p>
  
  <ol>
  <li>Count the number of list items</li>
  <li>Output that value to a different div</li>
  <li>Change the color of the output text if that value is greater than 13</li>
  </ol>
  
  <p>In a different div, I have multiple buttons with the class <code>.add</code> or <code>.delete</code>. Not surprisingly, clicking these buttons adds or deletes list items.</p>
  
  <p>The jQuery function works perfectly when the page is loaded, but what I'd like to also do is have this count update every time one of the above buttons is clicked.</p>
  
  <p>Here's my existing code:</p>
  
  <pre><code>    var totalItems = $('ul#myList li').length;
      $('#outputText').text(totalItems);
      if (totalItems &gt; 13) {
          $('#outputText').css('color','#F0402B');
      };
  </code></pre>
  
  <p>What do I need to add to make this work? I did look at the answers for this similar question (<a href="https://stackoverflow.com/questions/4683919/run-code-once-on-page-load-then-every-time-a-button-is-clicked">Run code once on page load, then every time a button is clicked</a>) but they didn't seem to help. Any help would be greatly appreciated!</p>