Rails Javascript nicht trotz Ready-Seite feuern: load

Question

Ich benutze Stripe mit Schienen und die Ajax-Aufrufe scheinen gut zu funktionieren, wenn ich die Seite aktualisieren. Ich glaube, das ist ein Problem mit Turbolinks, die 'ready page: load' funktioniert nicht so, wie ich es erwartet habe.

Hier ist das Formular für die Karte:

<%= form_tag subscribers_path, id:'subscriber_form' do %> 
<%= hidden_field_tag :authenticity_token, form_authenticity_token %> 

<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Add Card</h4> 
    </div> 
    <div class="modal-body"> 

     <div class="field"> 
     <%= label_tag :"Card Number" %> 
     <%= text_field_tag nil, nil, "data-stripe":"number", size:"20" %> 
     </div> 


     <div class="field"> 
     <%= label_tag :"Expiration Date" %> 
     <%= text_field_tag nil, nil, "data-stripe":"exp_month", size:"2" %>/ 
     <%= text_field_tag nil, nil, "data-stripe":"exp_year", size:"2" %> 
     </div> 

     <div class="field"> 
     <%= label_tag :"CVC" %> 
     <%= text_field_tag nil, nil, "data-stripe":"cvc", size:"4" %> 
     </div> 



    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <%= submit_tag "Add card", class:"btn btn-primary submit", id:"card_submit_button" %> 
    </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
<% end %> 

Und das Javascript:

$(document).on('ready page:load', function() { 


    $('#subscriber_form').submit(function(event) { 
    var $form = $(this); 

    console.log($form); 
    $form.find('.submit').prop('disabled', true); 
    $form.find('.submit').val('loading...'); 

    Stripe.card.createToken($form, stripeResponseHandler); 
    return false; 
    }); 

var stripeResponseHandler = function(status, response) { 
    var $form = $('#subscriber_form'); 

    if (response.error) { 
     $form.find('.payment-errors').text(response.error.message); 
     $form.find('button').prop('disabled', false); 
     $form.find('.submit').val('submit'); 
    } else { 
     $form.append($('<input type="hidden" name="stripeToken" />').val(token)); 

     var dataSet = $form.serialize(); 
     $.ajax({ 
     type: "POST", 
     url: $form.attr("action"), 
     data: dataSet, 
     dataType: "script", 
     complete: function(){ 
      $form.get(0).reset(); 
      console.log(response); 
      $('#card_select input:last').prop("checked", "checked"); 


      $('#cardModal').modal('hide') 

      $form.find('.submit').prop('disabled', false); 
      $form.find('.submit').val('Add card'); 

     }, 
     error: function(exception){console.log("exception" + exception);} 
     }); 
    } 
    }; 


}); 

Das Skript immer noch nicht funktioniert, wenn ich einen Link zu folgen Die Seite.

Answer 1

Soweit ich weiß, gibt es keine .on ist ('fertig'), so sollten Sie vielleicht einen ähnlichen Ansatz wie diese versuchen:

var stripe;

stripe = function() {...};

$(document).ready(stripe);

$(document).on('page:load', stripe);