javascript - 向 Stripe JS 按钮添加事件监听器

Question

<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_dNbyQ3qsyTe8IAikxSfnLhBl"
data-amount= <%= number_to_currency(@shopping_cart.total) * 100 %>
data-name="Abound"
data-description="Checkout"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto">
document.querySelectorAll('.stripe-button').addEventListener('click',function(){
  <%= @shopping_cart.clear %>
}

这是一个处理付款的 Stripe 按钮。问题出在事件监听器上。每次我刷新页面或转到不同的页面时，都会执行 ruby​​ 代码并清除我的购物车。有人有主意吗？ 即使我更改js使其无效，ruby也会被执行，你也能解释一下吗？

正在加载整页:

    <h1>Shopping Cart Contents</h1>
    <div style="font-size: 14px; "> <%= render :partial => 'shopping_cart_item', :collection => @shopping_cart.shopping_cart_it  ems %> </div>
    <div style="font-size: 18px;"><strong>Total:</strong><%= number_to_currency (@shopping_cart.total) %></div>
  <form>
    <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_dNbyQ3qsyTe8IAikxSfnLhBl"
    data-amount= <%= number_to_currency(@shopping_cart.total) * 100 %>
>>  data-name="Abound"
    data-description="Checkout"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto">
    document.querySelectorAll('.stripe-button').addEventListener('click',function(){
      <%= @shopping_cart.clear %>
    }
    </script>
  </form>

  </div>

编辑: 我最终所做的只是为购物车创建一个新的 View 页面，因为 Ruby 是在服务器端加载的，因此在 js 中嵌入效果不佳。

Answer 1

ruby 运行在服务器上......而不是在浏览器中......javascript 则相反

您的问题是 <%= @shopping_cart.clear %>每次都会在服务器上执行...而不是在浏览器中触发事件时执行。

我建议您使用ajax向服务器发送一些内容，然后根据需要清除该请求中的购物车