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

Question

由于我只有一个 djstripe 订阅计划，我正在尝试让我的 djstripe 付款/订阅页面无需点击即可弹出付款模式。通过单击按钮工作的 JavaScript 是这样的：

$(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 %}

});

我已经能够通过删除包装函数并将脚本放入文档就绪函数中来弹出模式，如下所示：

 $(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 %}

但是，这消除了 .djstripe-subscribe 按钮[type=submit] 选择器，导致 e.preventDefault() 出错，除非我按照此代码 sn-p 所示将其删除，并进行“服务器更新”提交付款方式后，永远没有结果。如何让modal弹出更新成功？

Answer 1

您可以做到这一点的一种方法是在代码的第一个版本上使用 jQuery 的 .click() 方法 (https://api.jquery.com/click/)，但在页面加载时“单击”元素？