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

turbolinks的问题在于，当您按照指向页面的链接或提交表单时，它不会让浏览器重新编译整个页面。相反，它取代了页面的主体。将一些javascript留在路边。

你可以查看上面链接的SO问题，了解如何使用turbolinks，或者你可以简单地删除turbolinks。

Rails 4：Jquery代码有时只呈现

1 个答案: