CSS 动画在单击按钮时未使用 Knockout 代码触发 - 并且未调度单击事件答案

【问题标题】：CSS Animation not firing with Knockout code on click of a button - and not dispatching click eventCSS 动画在单击按钮时未使用 Knockout 代码触发 - 并且未调度单击事件
【发布时间】：2016-12-06 23:56:23
【问题描述】：

我遇到了一些 Knockout 代码触发 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');
    });
 };

【问题讨论】：

您能否向我们提供您在 Jsfiddle 上的问题示例？
既然使用了knockout，为什么不使用knockout css 绑定给DOM 元素添加一个类？
嗨，马特 - 谢谢。我会，但是在幕后还有很多其他的事情发生，我可以尝试修改它以适应它。至于使用 css 绑定，这可能有效，但在这种情况下，我必须绑定每个按钮，这是我试图避免的。我确实认为这可能是我使用 KO 的最佳方式。

标签： javascript jquery css knockout.js

【解决方案1】：

我发现的主要区别是：

工作数据绑定将$data 绑定为this：

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

不工作的数据绑定绑定$data和addProductToCart的第一个参数：

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

Knockout 的默认点击处理程序签名是：

function(data, event) { }

与您的addProductToCart 签名相匹配。第二个（错误的）数据绑定创建了这些参数：

productMoreInfo(), $data, clickEvent

即：它将bind 中的附加参数添加到参数列表的前面。

快速的解决方案是创建一个新的事件监听器来处理额外的参数。但是，我强烈建议您完全改变您的方法。您应该查看afterRender、css 绑定和自定义绑定。避免在视图模型中使用 DOM 相关的 jQuery 代码。

【讨论】：

感谢您的帮助！