jQuery回调调用了两次

Question

我正在关注Rails演员来实现订阅计费.它在这里:

http://railscasts.com/episodes/288-billing-with-stripe

我的代码几乎完全相同,但我将一些额外的字段传递给Stripe.麻烦的是,javascript中的错误消息总是在提交按钮被点击时显示错误消息...即使成功收费.我不确定Strip是否返回了触发错误的东西,或者是否存在JS问题.

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subscription.setupForm()

subscription =
  setupForm: ->
    $('#new_membership').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        subscription.processCard()
        false
      else
        true

  processCard: ->
    card =
      number: $('#card_number').val()
      cvc: $('#card_code').val()
      expMonth: $('#card_month').val()
      expYear: $('#card_year').val()
    Stripe.createToken(card, subscription.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      $('#membership_stripe_card_token').val(response.id)
      $('#new_membership')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)

这是用于错误处理的示例条带.他们首先翻转过程并测试错误:

function stripeResponseHandler(status, response) {
    if (response.error) {
        ...
        //show the errors on the form
        $(".payment-errors").html(response.error.message);
    } else {
        var form$ = $("#payment-form");
        // token contains id, last4, and card type
        var token = response['id'];
        // insert the token into the form so it gets submitted to the server
        form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
        // and submit
        form$.get(0).submit();
    }
}

更新:所以我可以告诉你发生了什么,但不知道为什么或如何解决它.

我添加了一个控制台日志声明,可以看到,现在handleStripeResponse被称为两次,一次是当用户点击提交,并返回一个200再次的话,好像(也许是因为形式则有被张贴到实际处理Rails应用程序？并且它返回一个0,它会启动错误消息.但是 - 因为Rails现在处理处理服务器端,所以费用会通过.

这是编译的JS,如果有帮助:

(function() {
  var subscription;

  jQuery(function() {
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
    return subscription.setupForm();
  });

  subscription = {
    setupForm: function() {
      return $('#new_membership').submit(function() {
        $('input[type=submit]').attr('disabled', true);
        if ($('#card_number').length) {
          subscription.processCard();
          return false;
        } else {
          return true;
        }
      });
    },
    processCard: function() {
      var card;
      card = {
        number: $('#card_number').val(),
        cvc: $('#card_code').val(),
        expMonth: $('#card_month').val(),
        expYear: $('#card_year').val()
      };
      return Stripe.createToken(card, subscription.handleStripeResponse);
    },
    handleStripeResponse: function(status, response) {
      if (status === 200) {
        $('#membership_stripe_card_token').val(response.id);
        return $('#new_membership')[0].submit();
      } else {
        $('#stripe_error').text(response.error.message);
        return $('input[type=submit]').attr('disabled', false);
      }
    }
  };

}).call(this);

Answer 1

我遇到了同样的问题.我不知不觉地两次调用javascript.

一旦(明确地)在页面上:

= javascript_include_tag 'stripe'

然后(无意中)在application.js中

//= require_tree .

结果是jQuery文档就绪函数被调用两次,这导致所有侦听器被设置两次.

根据您的应用程序设置方式,您应该删除一个或另一个包含.对于我的应用程序,最好从我的application.js中删除该行.

棘手的资产管道!