javascript - 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 通过保留 <head> 来加快 Rails 页面的加载速度。代码常量，更改 <body>用 Ajax 。问题是这会让你的标准 JS 认为页面没有改变，因此只能在刷新后工作

有两种方法可以解决 Turbolinks 问题:

1. Delegate
2. Use Turbolinks page:load & page:change

<小时/>

委托(delegate)

如果你想绑定(bind)到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);