title: CSS Animation not firing with Knockout code on click of a button - and not dispatching click event
body: <p>I'm running into an issue with some Knockout code firing off a CSS3 animation. It works with one block of code, and doesn't on another. The idea is to show an animation when you add an item to the cart. The object in the code not working is coming up empty, where as the one working displays the product notification' div. The other issue is that  $('#cart-nav a.first').click(); is not getting dispatched when this action is performed. This is not working in either scenario.</p>
  
  <p>Below is where the code works (for the animation), and another where it does not. Appreciate any help. Thanks</p>
  
  <p>Working code where CSS3 Animation fires off when you add an item to the cart. The class 'rise' triggers the animation. One working block of code, the other not working, and the JS below that. Thank you</p>
  
  <p>Works</p>
  
  <pre><code>&lt;div class="thumbnail product-image medium"&gt;
      &lt;div class="actions"&gt;
         &lt;div class="product-notification-cont"&gt;
           &lt;div class="product-notification"&gt; Added to cart!&lt;/div&gt;
         &lt;/div&gt;
         &lt;a href="#" class="button product-add-to-cart" data-bind="click:$root.addProductToCart.bind($data)"&gt;Add to Cart&lt;/a&gt;
         &lt;a href="#" class="button purple product-more-info" data-bind="click:$root.productShowMoreInfo.bind($data)"&gt;More Info&lt;/a&gt;
      &lt;/div&gt;
      &lt;a href="" data-bind="attr:{href:'/#products/'+$data.id}"&gt;
         &lt;img src="" data-bind="attr:{alt:$data.name, src:$root.servicePath+'products/'+$data.id+'/images/preview_image/medium?auth='+ax.JRR}" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Doesn't work</p>
  
  <pre><code>  &lt;div class="product-info" data-bind="visible:!(productLoading())"&gt;
        &lt;h2 data-bind="text:product().name"&gt;&lt;/h2&gt;
        &lt;div class="product-description" data-bind="html:product().description"&gt;
        &lt;/div&gt;
        &lt;div class="product-notification-cont"&gt; 
          &lt;div class="product-notification"&gt; Added to cart! &lt;/div&gt;
        &lt;/div&gt;   
        &lt;button class="button" data-bind="click:addProductToCart.bind($data,productMoreInfo())"&gt;Add to Cart&lt;/button&gt;
  
          &lt;? } else { ?&gt;
        &lt;h3&gt;&lt;?=l(23)?&gt;&lt;/h3&gt;
      &lt;? } ?&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>JS (console.log in there for debugging purposes)</p>
  
  <pre><code> self.addProductToCart = function(data, event) {
        var $productNotification = $(event.target).prev().children('.product-notification');
        console.log($productNotification);
        ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
       $('#cart-nav a.first').click();
       $productNotification.addClass('rise');
  
       $productNotification.on('animationend',function() {
          $(this).removeClass('rise');
      });
   };
  </code></pre>