jquery .submit第一次沒有被調用

Question

.submit()在第一次提交表單時沒有被調用。一旦創建操作失敗並且用戶被重定向回頁面，如果單擊提交按鈕，該函數就會被調用。我將調試器投入setUpForm()，並且在第一次加載頁面並提交表單時不會觸發它。

第二個問題是.animate不再有效。這是，但後來就停止了。下面是代碼

purchase.js

$(function(){ 
    Stripe.setPublishableKey($('meta[name = "stripe-key"]').attr('content')); 
    setUpForm(); 


     function setUpForm(){ $('#new_purchase').submit(function(){ 
      $('input[type= submit]').attr('disabled',true); 
      processCard(); 
      return false 
    }); 
} 

function processCard() { 
     var card = { 
      number : $("#card_number").val(), 
      cvc: $('#card_code').val(), 
      expMonth: $('#card_month').val(), 
      expYear : $('#card_year').val() 
     }; 
     Stripe.createToken(card, handleStripeResponse); 
    } 

    var handleStripeResponse = function(status, response){ 
     if (response.error) 
      { 
       var originalColor = $('#stripe_error').css('background') 
       $('#stripe_error').text(response.error.message).show(); 
       $('#stripe_error').animate({backgroundColor: "#FFFF00"}, 1000, function(){ 
        $(this).animate({backgroundColor: originalColor}, 1000); 
       }); 
      $('input[type=submit]').attr('disabled', false); 
     // alert(response.error.message); 

     } 
    else 
    { 
     // alert(response.id); 
    $('#purchase_stripe_customer_token').val(response.id) 
     $('#new_purchase')[0].submit() 
    } 
} 
}); 

ny.html.erb

<div class = "uk-width-4-6 greeting_div"> 

    <div class = "img_div"><img class="trip_page" src= <%= asset_path('top_empire.JPG') %>></div> 
    <h1 class= "greetings"> Greetings from: </h6> 


</div> 

<div class = "uk-width-2-6 greeting_div_2"> 
    <img class= "stamp" src = <%= asset_path('us_stamp.jpg') %> > 
    <div class= "trip_information"> 
     <p>To: <%=@purchase.trip.location %></p><br> 

     <p>From: <%=@purchase.trip.cost%> for 10 days</p> 
     <div class = "uk-form"> <%= render 'layouts/form' %></div> 
    </div> 

</div> 

_form_html.erb

<br> 
     <legend> Buy Now! </legend> 
     <%= form_for(@purchase, :method => :post) do |f| %> 
     <% if @purchase.errors.any? %> 
     <div class="error_messages"> 
      <ul> 
       <%= @purchase.errors.full_messages.each do |error| %> 
        <li> <%= error %> <li> 
       <% end %> 
      </ul> 
     </div> 
     <%end%> 

     <%= f.hidden_field :trip_id %> 
     <%= f.hidden_field :stripe_customer_token %> 
     <%= f.hidden_field :value_of_trip, value: "#{@purchase.trip.cost}"%> 

     <% if @purchase.stripe_customer_token.present? %> 
      <p> Your card has been provided <p> 
     <% else %> 
     <div id="stripe_error"> 
        <noscript> Javascript must be enabled to use this form </noscript> 

      </div></br> 
       <div class = "uk-form-row"> 
        <%= label_tag :card_number, "Credit Card Number" %> 
        <%= text_field_tag :card_number, nil, name: nil %> 
       </div> 
       <div class = "uk-form-row"> 
        <%= label_tag :card_code, "Security Code" %> 
        <%= text_field_tag :card_code, nil, name: nil %> 
       </div> 
       <div class = "uk-form-row"> 
        <%= label_tag :card_month, "Credit Expiration" %> 
        <%= select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month"} %> 
       <%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year"} %> 
       <div><br> 
     <% end %> 
      <div class = "uk-form-row submit"> 
       <%= f.submit "Purchase" %> 
      </div> 
    <% end %> 

源

<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/uikit.almost-flat.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/uikit.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/home_pages.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/purchases.css?body=1" media="all" rel="stylesheet" /> 
    <script data-turbolinks-track="true" src="https://js.stripe.com/v1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/form.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/purchases.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/uikit.min.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> 

Answer 1

Turbolinks

聽起來與Turbolinks

基本上是一個問題，Turbolinks使得導軌頁面加載更快通過保持<head>代碼恆定，改變<body>與AJAX。問題是，這使得你的標準JS覺得頁面沒有改變，因此唯一的工作後刷新

有兩種方法來解決問題Turbolinks：

1. 代表
2. 使用Turbolinks page:load & page:change

---

代表

如果要綁定到submit事件，你最好delegating從document對象（不改變）：

$(document).on("submit", "#new_purchase", function() { 
    //submit code 
}); 

---

活動

有two Turbolinks events called page:load and page:change這將極大地幫助你：

$(document).ready(your_function); 
$(document).on('page:load', your_function); 
$(document).on('page:change', your_function); 

Answer 2

如果我理解正確的話你對形式的腳本提交檢查信用卡數據，並succesfull覈實後整個窗體再次

提交修改setupForm方法：

/** 
* Simulate form submit with click on submit button 
*/ 
$('input[type= submit]').on('click', function (e) { 
    e.preventDefault(); 
    $(this).attr('disabled', true); 
    processCard(); 
}); 

and callback

var handleStripeResponse = function (status, response) { 
    if (response.error) { 
     var originalColor = $('#stripe_error').css('background') 
     $('#stripe_error').text(response.error.message).show(); 
     $('#stripe_error').animate({ 
      backgroundColor: "#FFFF00" 
     }, 1000, function() { 
      $(this).animate({ 
       backgroundColor: originalColor 
      }, 1000); 
     }); 
     $('input[type=submit]').attr('disabled', false); 
     // alert(response.error.message); 

    } else { 
     // alert(response.id); 
     $('#purchase_stripe_customer_token').val(response.id) 
     /** 
     * Trigger submit on form after succesfull validation 
     */ 
     $('#new_purchase').trigger('submit'); 
    } 
}