CSS动画没有在点击按钮时使用Knockout代码启动，也没有调度点击事件

CSS Animation not firing with Knockout code on click of a button - and not dispatching click event

本文关键字：启动 代码 事件 调度 Knockout 动画 按钮 CSS      更新时间：2023-09-26

我遇到了一个问题，一些Knockout代码触发了CSS3动画。它适用于一块代码，而不适用于另一块代码。这样做的目的是在将商品添加到购物车时显示动画。代码中不工作的对象为空，其中工作的对象显示产品通知"div"。另一个问题是$（"#cart nav a.first"）.click（）；执行此操作时未被调度。这在任何一种情况下都不起作用。

下面是代码（用于动画）的工作位置，另一个代码不工作。感谢您的帮助。感谢

当您将项目添加到购物车时，CSS3动画启动的工作代码。类"上升"会触发动画。一个工作的代码块，另一个不工作，以及下面的JS。谢谢

Works

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

我发现的主要区别是：

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

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

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

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

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

function(data, event) { }

与您的CCD_ 5签名相匹配。第二个（错误的）数据绑定创建以下参数：

productMoreInfo(), $data, clickEvent

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

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

相关文章：