出現在prod（在Heroku上）但不是本地的多個彈出窗口

Question

我以前曾經遇到過這個問題（Button click causes multiple Stripe modals to pop up），但之前的原因是因爲我有兩個回調觸發同一個事件（打開Stripe結帳模式）。

但是，這裏的問題是不同的。我只有一個回調觸發它（點擊一個按鈕），在本地，它的行爲如預期，只有一個模式彈出。但是，在Heroku上，兩個彈出窗口出現在另一個之上。我清理了我的資產並從頭開始重建，但問題依然存在。

Here is the code of the page: 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script> 

<div class="panel panel-default"> 
<div class="panel panel-header"> 
    <h1 style="text-align: center"> <%= current_user(@conn).name %> </h1> 
</div> 

<div class="panel panel-content"> 
<%= if current_user(@conn) do %> 

<%= if current_user(@conn).instagram_token == nil do %> 
<button onclick="location.href='<%= @url %>&current_user=<%= current_user(@conn).id %>'" type="button" class="btn btn-primary btn-md"> 
Login Instagram 

</button> </br> </br> 
<% end %> 

    <p> <%= current_user(@conn).home %> </p> 



<%= if current_user(@conn).instagram_token != nil do %> 

    <button onclick="location.href='/instagram'" type="button" class="btn btn-primary btn-md"> 
    Instagram Feed 
    </button> 



<% end %> 
<%= if current_user(@conn).customer_id do %> 
<p> Stripe customer_id: <span class="keys"><%= current_user(@conn).customer_id %></span> </p> 
<p> Stripe account_id: <span class="keys"><%= current_user(@conn).connect_id %></span> </p> 
<p> Stripe pub_key: <span class="keys"><%= current_user(@conn).publishable_key %></span> </p> 
<p> Stripe secret_key: <span class="keys"><%= current_user(@conn).secret_key %></span> </p> 
<% else %> 
      <button id="addcard" 
        onclick="addCardFunction()" 
        title="Add payment information" 
        data-name="<%= current_user(@conn).name %>" 
        data-email="<%= current_user(@conn).email %>" 
        class="btn btn-primary"> 
        Add Card 
      </button> 

<% end %> 
<style> 
    .keys { 
    font-size: large; 
    color: blue; 
    } 
    </style> 

<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#profile_picture_modal"> 
    Add Profile Picture 
</button> 


<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#modal1"> 
    Add Bank Account 
</button> 

<script> 

</script> 
<!-- THEN HAVE OPTION FOR INSTAGRAM OR FILE UPLOAD--> 



<% end %> 


</div> 

</div> 


function addStripeInformation(data) { 
    console.log("hey"); 
    var handler = StripeCheckout.configure({ 
    key: 'pk_test_k90DPHCGKmfYhYa5anVRrVKy', 
    // key: 'pk_live_Q43jYi6k0EatjdmDkVYivYQY', 
    token: function(token) { 
     $.ajax({ 
     url: '/users/customer', 
     type: "POST", 
     beforeSend: function(xhr) { 
      xhr.setRequestHeader('x-csrf-token', '<%= get_csrf_token() %>') 
     }, 
     data: { 
      "token" : token.id, 
      "email" : data.email 
     }, 
     success: function(data, e) { 
      console.log(data); 
     } 
     }); 
    } 
    }); 


    $(function(){ 
    // Open Checkout with further options 
    handler.open({ 
     email: data.email, 
     name: data.name, 
     description: 'You\'ll be eating before you know it', 
     zipCode: false, 
     panelLabel: "Add Information", 
     allowRememberMe: false 
    }); 
    }); 

    // Close Checkout on page navigation 
    $(window).on('popstate', function() { 
    handler.close(); 
    }); 
} 


function addCardFunction() { 
    var name = $('#addcard').attr('data-name'); 
    var email = $('#addcard').attr('data-email'); 
    addStripeInformation({'name' : name, 'email' : email}); 
    return false; 
} 

</script> 

Answer 1

問題是我是用多個JQuery S，取出並使用亭子/ NPM解決我的問題