Javascript 为什么导航栏会干扰条纹标记的创建？

问题：我的导航栏可以在javascript上工作，不知何故干扰了我的条带标记创建

添加条带帐户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>

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

  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);
});

导航条形码：

<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>

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

  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);
});

您是否看到任何可能导致令牌无法创建的情况？这里一定有干扰

使用navbar时，不会创建任何标记。没有它，它工作得很好

而且，只有当我去掉html代码时，它才会出现。（以备不时之需）

您的

块包含一个
元素，当您使用
document.querySelector（'form'）
绑定事件侦听器时，它将绑定到nav中的该表单，而不是条带
元素

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


相反，您可以尝试通过id获取您的付款单，如：

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

看来我们走对了方向。当我执行“document.getElementById（'payment-form-1'）.addEventListener（'submit'，函数（e）{”…令牌被创建，但实际上没有提交到stripe。我还尝试了：“document.querySelector（'#payment-form-1'）。addEventListener（'submit'，函数（e）{”当相同的结果出现时，为了澄清这一点，除了在页面上显示的令牌之外，什么也没有发生。没有提交，没有加载或重新加载，等等。这让doed起了作用。解决方法是将var表单更改为：：：var form=document.getElementById（'payment-form-1'）；太棒了，很高兴听到它：）