CSS動畫不會在單擊按鈕時使用敲除代碼觸發，並且不會調度click事件

Question

我遇到了一些淘汰CSS3動畫的代碼問題。 它只能處理一個代碼塊，而不能用於另一代碼塊。 想法是在將商品添加到購物車時顯示動畫。 代碼中不起作用的對象將顯示為空，其中一個正在顯示產品通知的div。 另一個問題是$（'＃cart-nav a.first'）。click（）; 執行此操作時未分派。 在兩種情況下均不起作用。

下面是代碼（適用於動畫）工作的地方，而另一個則不起作用。 感謝任何幫助。 謝謝

將商品添加到購物車時，會觸發CSS3動畫觸發的工作代碼。 類“上升”觸發動畫。 一個工作代碼塊，另一個工作塊，以及下面的JS。 謝謝

作品

<div class="thumbnail product-image medium">
    <div class="actions">
       <div class="product-notification-cont">
         <div class="product-notification"> Added to cart!</div>
       </div>
       <a href="#" class="button product-add-to-cart" data-bind="click:$root.addProductToCart.bind($data)">Add to Cart</a>
       <a href="#" class="button purple product-more-info" data-bind="click:$root.productShowMoreInfo.bind($data)">More Info</a>
    </div>
    <a href="" data-bind="attr:{href:'/#products/'+$data.id}">
       <img src="" data-bind="attr:{alt:$data.name, src:$root.servicePath+'products/'+$data.id+'/images/preview_image/medium?auth='+ax.JRR}" />
    </a>
</div>

不起作用

  <div class="product-info" data-bind="visible:!(productLoading())">
      <h2 data-bind="text:product().name"></h2>
      <div class="product-description" data-bind="html:product().description">
      </div>
      <div class="product-notification-cont"> 
        <div class="product-notification"> Added to cart! </div>
      </div>   
      <button class="button" data-bind="click:addProductToCart.bind($data,productMoreInfo())">Add to Cart</button>

        <? } else { ?>
      <h3><?=l(23)?></h3>
    <? } ?>
  </div>

JS（其中的console.log用於調試）

 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');
    });
 };

Answer 1

我發現的主要區別是：

工作數據綁定綁定$data作為this ：

data-bind="click:$root.addProductToCart.bind($data)"

無效的數據綁定將$data 和 addProductToCart的第一個參數addProductToCart ：

data-bind="click:addProductToCart.bind($data,productMoreInfo())"

淘汰的默認點擊處理程序簽名為：

function(data, event) { }

與您的addProductToCart簽名匹配。 第二個（錯誤的）數據綁定創建以下參數：

productMoreInfo(), $data, clickEvent

即：它將bind的其他參數添加 到參數列表的前面 。

快速解決方案是創建一個處理額外參數的新事件偵聽器。 但是 ，我強烈建議您完全改變您的方法。 您應該查看afterRender ， css綁定和自定義綁定。 在視圖模型中避免與DOM相關的jQuery代碼。