弹出djstripe付款模式，无需单击按钮

Question

Since I only have one djstripe subscription plan, I'm trying to get my djstripe payments/subscribe page to pop up the payments modal without a click. The JavaScript that works with the click of a button is this:

$(function() {   
    $('body').on("click", '.djstripe-subscribe button[type=submit]', function(e) {
      e.preventDefault();
      // retrieve current $(".djstripe-subscribe")
      var $form = $(e.target).parents('form'),
          token = function(res) {
            $form.find("input[name=stripe_token]").val(res.id);
            $("button[type=submit]").attr("disabled", "true");
            $('#in-progress').modal({"keyboard": false})
            $('.progress-bar').animate({width:'+=100%'}, 2000);
            $form.trigger("submit");
          };
      StripeCheckout.open({
        key:         "{{ STRIPE_PUBLIC_KEY }}",
        name:        'Payment Method',
        panelLabel:  'Add Payment Method',
        token:       token
      });

      return false;
    });
    {% if PLAN_LIST|length > 1 %}
      $('.djstripe-change-plan').click(function(e){
          $("button[type=submit]").attr("disabled", "true");
          $('#in-progress').modal({"keyboard": false})
          $('.progress-bar').animate({width:'+=100%'}, 2000);
          var $form = $(this);
          $form.trigger("submit");
      });
    {% endif %}

});

I've been able to get the modal to pop up by removing the wrapper function and putting the script in a document ready function, like this:

 $(document).ready(function(e) {
      // retrieve current $(".djstripe-subscribe")
      var $form = $(e.target).parents('form'),
          token = function(res) {
            $form.find("input[name=stripe_token]").val(res.id);
            $("button[type=submit]").attr("disabled", "true");
            $('#in-progress').modal({"keyboard": false})
            $('.progress-bar').animate({width:'+=100%'}, 2000);
            $form.trigger("submit");
          };
      StripeCheckout.open({
        key:         "{{ STRIPE_PUBLIC_KEY }}",
        name:        'Payment Method',
        panelLabel:  'Add Payment Method',
        token:       token
      });

      return false;
    });
    {% if PLAN_LIST|length > 1 %}
      $('.djstripe-change-plan').click(function(e){
          $("button[type=submit]").attr("disabled", "true");
          $('#in-progress').modal({"keyboard": false})
          $('.progress-bar').animate({width:'+=100%'}, 2000);
          var $form = $(this);
          $form.trigger("submit");
      });
    {% endif %}

However, this eliminates the .djstripe-subscribe button[type=submit] selector, causes errors with e.preventDefault() unless I remove it as shown in this code snippet, and makes the "server update" that comes up after a payment method is submitted crank eternally with no results. How can I get the modal to pop up and update successfully?

Answer 1

您可以执行此操作的一种方法是在第一版代码上使用jQuery的.click（）方法（ https://api.jquery.com/click/ ），但是在页面加载时“单击”该元素吗？