javascript - rails 4 : Jquery code only renders sometimes

Question

我有一段 Jquery 代码，一旦用户第一次注册并进入我加载 Jquery 代码的页面，它就不起作用，但是一旦我重新加载页面，它就会显示正常。似乎每次我创建帐户然后转到代码不显示的页面时都会发生这种情况。

我已包含在我的 application.rb config.assets.precompile += %w( finder.js ) 中并通过<%= javascript_include_tag "finder.js" %>在html中呈现Javascript
什么可能导致代码在注册时无法呈现，性能问题？

这是我的代码:

Form.html.erb

<!-- multistep form -->


<div class="container">
    <div class="row">
        <div class="margin-top text-center">
      <h2 class="bg-success">Answer each question, &amp; we match you with your ideal career choice!</h2>
    </div>
        <div class="margin-little-top">
<form id="msform">

    <fieldset id="firstField">

        <h2 class="fs-title">Are you Technical or Creative?</h2>

        <h3 class="fs-subtitle">This is step 1</h3>

        <input type="button" name="technical" class="next action-button" value="Technical" />

        <input type="button" name="creative" class="next action-button" value="Creative" />

    </fieldset>

    <fieldset id="technicalField">
        <h2 class="fs-title">You walk into a room at a party, do you go to the center of the room or stay on the periphery?</h2>
        <h3 class="fs-subtitle">This is step 2</h3>


        <input type="button" name="algebra" class="next action-button" value="Algebra" />
        <input type="button" name="geometry" class="next action-button" value="Geometry" />
        <br>
        <input type="button" name="previous" class="previous action-button" value="Previous" />

    </fieldset>

      <fieldset id="algebraField">
        <h2 class="fs-title">Algebra</h2>
        <input type="button" name="previous" class="previous action-button" value="Previous" />

    </fieldset>

    <fieldset id="geometryField">
        <h2 class="fs-title">Geometry</h2>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
    </fieldset>

<!------##################Sciences#####################---->

    <fieldset id="creativeField">
        <h2 class="fs-title">Creative</h2>
        <h3 class="fs-subtitle">Do you like Chemistry or Biology?</h3>
       <input type="button" name="chemistry" class="next action-button" value="chemistry" />

       <input type="button" name="biology" class="next action-button" value="Biology" />
    </fieldset>

    <fieldset id="chemistryField">
        <h2 class="fs-title">Chemistry</h2>

    </fieldset>

    <fieldset id="biologyField">
        <h2 class="fs-title">Biology</h2>

    </fieldset>

</form>
</div></div></div>


<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>

<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<%= javascript_include_tag "finder.js" %>

finder.js

//jQuery time
var current_fs, next_fs, previous_fs, maths_fs, science_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;
    current_fs = $(this).parent();


    if($(this).attr('name') == 'technical')
        next_fs = $('#technicalField');
     if($(this).attr('name') == 'algebra')
        next_fs = $('#technicalField');
     if($(this).attr('name') == 'geometry')
        next_fs = $('#technicalField');



    if($(this).attr('name') == 'creative')
        next_fs = $('#creativeField');
    if($(this).attr('name') == 'chemistry')
        next_fs = $('#chemistryField');
    if($(this).attr('name') == 'biology')
        next_fs = $('#biologyField');

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $('#firstField');

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
});

Answer 1

也许这是与 Turbolinks 相关的问题。看看这个问题:

Rails 4: how to use $(document).ready() with turbo-links

涡轮链接的问题是，当您点击页面链接或提交表单时，它不会让浏览器重新编译整个页面。相反，它替换了页面的主体。将一些 JavaScript 留在路边。

您可以查看上面链接的SO问题，了解使用turbolinks的方法，或者您可以简单地完全删除turbolinks。