title: JQuery Event Not Firing First Click
body: <p>I know there's a couple of similar issues, but none of them seem to work in my case.</p>
  
  <p>I have this JQuery code snip:</p>
  
  <pre><code>$(document).ready(function() {
  
    CartCount();
  
    $('.product-item input[type="submit"]').on('click', CartCount);
  
  });
  
  function CartCount() {
    var cartItems = 0;
    var cartItemTypes = iGetCookie("NumberOrdered", 0);
    var cartItem;
    for(i = 1; i &lt;= cartItemTypes; i++) {
      cartItem = String(GetCookie("Order." + i)).split("|");
      cartItems += parseInt(cartItem[1]);
    }
    $('.top-cart-count').html(cartItems);
  }
  </code></pre>
  
  <p>The code works perfectly after the second click but never the first. After the second click, .top-cart-count displays the cartItems value that should have been displayed on the previous click. Any ideas?</p>
  
  <p>Edit: Sorry if I wasn't very clear about what's going on. I actually have multiple cookies: 1 for the sum of all the different types of items the user orders and 1 for each item type. Within the cookie for each individual type is an array which contains the quantity (just of that type) at index 1. CardCount() basically just sums up all the quantities for all the different types if there are any items ordered (at least 1 type). Basically, I'm trying to update the item count AND display this updated count when the form is submitted. Since the cookie that stores number of different types is set to 0 by default, I don't think I need to call the add function before the display (unless I'm updating the value).</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;form onSubmit="return AddToCart(this)"&gt;
          &lt;input type="submit"  value="Add to Cart"&gt;
        &lt;/form&gt;
  </code></pre>