点击事件不会在首次点击时触发，而是在每次点击后触发

Question

我正在将“添加到购物车”按钮更新为购物车中的商品的跨度计数器，每次单击该按钮后，该计数器每次都有效，但第一次单击时不起作用

我尝试使用.on方法给出相同的结果，并尝试使用document.ready也不起作用。

$(document).ready(function() {
  $('#addToCart').on('click', function() {
    jQuery.getJSON('/cart.js', function(cart) {
      $("span.count").html(cart.item_count);
    });
  }); 
});

我希望addToCart按钮可以在每次点击时更新span.count。 实际结果是它在第一次单击后就可以使用。

Answer 1

$(document).ready(function() { 
  $('#addToCart').on('click', function() { 
    alert("Hello"); 
  }); 
});

请立即尝试，希望对您有所帮助

Answer 2

每次单击按钮，按钮单击就没有问题

 $(document).ready(function() { $('#addToCart').on('click', function() { alert('button clicked'); jQuery.getJSON('/cart.js', function(cart) { $("span.count").html(cart.item_count); }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/shopify-cartjs/0.4.1/cart.min.js"></script> <button id="addToCart" type="button">Add to cart</button> <span>Cart Items: </span> <span class="count">0</span> 

Answer 3

如果可行，您可以尝试以下提供的解决方案：

$(document).ready(function() {
    $(document).on('click', '#addToCart', function() {  
        alert('button clicked');
        jQuery.getJSON('/cart.js', function(cart) { 
            $("span.count").html(cart.item_count);
        });
    }); 
});

Answer 4

我想建议您另一种无需使用Ajaxify购物车API即可更新购物车的方法。 您应该尝试一次。 我说的是cart.js

您只需要在主题标题中的CDN下方添加即可。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shopify-cartjs/0.4.1/cart.min.js"></script>

之后，您需要在html中添加标签“ data-cart-render”。 它将自动在html标签中呈现购物车项目计数。 例：

<span data-cart-render="item_count"></span>