Question

问题：我的导航栏（可在javascript上运行）以某种方式干扰了我的Stripe令牌的创建。

添加条带化帐户ID时，一切都很好，但是随后我去将银行帐户（外部帐户）附加到帐户ID中，这是行不通的。然后我意识到，当我拿走我的导航栏代码时，它将起作用...

此代码中有哪些干扰？：

导航栏代码：

<nav class="navbar navbar-expand navbar-dark fixed-top nav-color"> <a href="#menu-toggle" id="menu-toggle" class="navbar-brand"><span class="navbar-toggler-icon"></span></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
            <div class="collapse navbar-collapse" id="navbarsExample02">
                <div class="navbar-header navbar-center">
                    <a class="navbar-brand center" id="navbar-center" href="/">Dashboard</a>
                </div>
                <ul class="navbar-nav mr-auto ">
                    <!-- <li class="nav-item active"> <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a> </li> -->
                </ul>
                <ul class="navbar-nav navbar-right dashboard-signout">

                <% if user_signed_in? || affiliate_signed_in? %>
                  <li class="nav-remove-1"><%= link_to "Sign Out", destroy_user_session_path, method: :delete, class: "dashboard-signout" %>
                  </li>
                <% end %>
                </ul>
                <form class="form-inline my-2 my-md-0"> </form>
            </div>
        </nav>

以下是它的javascript：

$(function(){
           $("#menu-toggle").click(function(e) {
               e.preventDefault();
               $("#wrapper").toggleClass("toggled");
           });




           $(window).resize(function(e) {
             if($(window).width()<=992){
               $("#wrapper").removeClass("toggled");
             }else{
               $("#wrapper").addClass("toggled");
             }
           });
         });

有了它，它就行不通，没有它，它就行。

以下是条纹形式：

<form action="/bank_accounts" method="POST" id="payment-form-1">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-custom">Submit</button>
       <div class="outcome">
       <div class="error"></div>
       <div class="success">
                                        Success! Your Stripe token is <span class="token"></span>
       </div>
       </div>
</form>

条纹银行帐户表格的Javascript

  var stripe = Stripe('pk_test_123456789');

  function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    var form = document.querySelector('form');
    form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    form.submit();

  } else {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();

  var bankAccountParams = {
    country: document.getElementById('country').value,
    currency: document.getElementById('currency').value,
    account_number: document.getElementById('account-number').value,
    account_holder_name: document.getElementById('account-holder-name').value,
    account_holder_type: document.getElementById('account-holder-type').value,
  }
  if (document.getElementById('routing-number').value != '') {
    bankAccountParams['routing_number'] = document.getElementById('routing-number').value;
  }

  stripe.createToken('bank_account', bankAccountParams).then(setOutcome);
});

您是否看到会导致无法创建令牌的任何内容？这里一定有干扰发生。

使用导航栏时，不会创建令牌。没有它，它会很好地工作。

此外，只有当我拿走html代码时。（以防万一）

Answer 1

您的import UIKit class ViewController2: UIViewController { @IBOutlet weak var passwordFieldValue: UILabel! @IBOutlet weak var confirmPasswordField: UITextField! var passwordFieldValue = "" override func viewDidLoad() { super.viewDidLoad() passwordFieldValue.text = passwordFieldValue } @IBAction func backToViewController(_ sender: Any) { print("Back to ViewController") self.performSegue(withIdentifier: "ViewController2ToViewController1", sender: self) } }块包含一个<nav> ... </nav>元素，当您使用<form>绑定一个事件侦听器时，它将绑定到您的导航中的该形式，而不是Stripe {{1 }}元素。

querySelector（）返回文档中与指定选择器匹配的第一个元素

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

相反，您可以尝试按ID提取付款表单，例如：

document.getElementById（'payment-form-1'）。addEventListener（'submit'，function（e）{ ... }）;

为什么我的导航栏会干扰我的Stripe令牌创建？

1 个答案: