CSS動畫沒有點擊按鈕擊倒代碼 - 而不是調度點擊事件

我遇到了一些Knockout代碼觸發CSS3動畫的問題。它使用一段代碼，而不是另一段。這個想法是當你添加一個物品到購物車時顯示一個動畫。代碼中的對象無法工作，因爲工作中的對象顯示產品通知「div」。另一個問題是$（'＃cart-nav a.first'）。click（）;在執行此操作時不會被分派。這在任何一種情況下都不起作用。CSS動畫沒有點擊按鈕擊倒代碼 - 而不是調度點擊事件

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

工作代碼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'); 
    }); 
};

來源

2016-08-01 erics15

你能否提供一個關於Jsfiddle的問題示例？ –

爲什麼不使用knockout'css'綁定向DOM元素添加類，因爲您使用的是挖空？ –

嗨馬特 - 謝謝。我想，但幕後還有很多其他的事情發生，我可以嘗試修改它以適應。至於使用CSS綁定，這可能會工作，但在這種情況下，我不得不綁定每個按鈕，我試圖避免的東西。無論如何，我確實看到它可能是我使用KO的最佳方式。 – erics15

主要的區別我點是這樣的：

工作數據綁定結合$data爲this：

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

的不工作的數據綁定結合$data和的addProductToCart第一個參數：

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

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

function(data, event) { }

它與您的匹配簽名。第二（故障）數據綁定創建這些參數：

productMoreInfo(), $data, clickEvent

即：它增加在bind附加參數的參數列表的前面。

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

來源

2016-08-02 12:04:07 user3297291

感謝您的幫助！ – erics15

CSS動畫沒有點擊按鈕擊倒代碼 - 而不是調度點擊事件

回答

相關問題