在页面刷新之前，JQuery不会运行 [英] JQuery won't run until page refresh

问题描述

我有一个简单的脚本来隐藏和显示某些按钮，但JavaScript不会运行，直到页面重新加载。一旦用户点击该链接，我怎么才能让它运行？例如，当用户第一次链接到页面时，页面已经隐藏了某些div。

  var array = [。部分-1，部分-2，部分-3，部分-4，部分-5]; 
 
 var cnt = 0; 
 
 $（function（）{
 for（var i = 0; i <5; i ++）{
 $（array [i]）。hide（）; 
 
 $（array [cnt]）。show（）; 
 $（。previous）。hide（）; 
 $（。next）。click函数（）{
 if（cnt< 4）{
 $（array [cnt]）。hide（）; 
 cnt ++; 
 $（array [cnt]）。 show（）; 
} 
 if（cnt == 4）{
 $（。next）。hide（）; 
} 
 if（cnt> ; 0）{
 $（。previous）。show（）; 
} 
 
}）; 
 
 $（。previous ）.click（function（）{
 
 if（cnt> 0）{
 $（array [cnt]）。hide（）; 
 cnt--; 
 $（array [cnt]）。show（）; 
} 
 
 
 if（cnt <4）{
 $（。next） 。（）; 
} 
 if（cnt == 0）{
 $（。previous）。hide（）; 
} 
 
}）; 
}）; 
  

以下是清单文件。

  //这是一个将被编译到application.js中的清单文件，它将包含下面列出的所有文件
 //。 
 // 
 //此目录中的任何JavaScript / Coffee文件，lib / assets / javascripts，vendor / assets / javascripts，
 //插件的vendor / assets / javascripts ，可以在这里使用相对路径来引用。 
 // 
 //在这里直接添加代码是不可取的，但如果你这样做，它会出现在
 //编译文件的底部。 
 // 
 //读取Sprockets README（https://github.com/sstephenson/sprockets#sprockets-directives）获取详细信息
 //关于支持的指令。 
 // 
 // =要求jquery 
 // =要求jquery_ujs 
 // =要求turbolinks 
 // =要求用户
  

解决方案

您的问题与 turbolinks

问题是，Turbolinks会阻止你的JS加载正常，因为它会重新加载页面的主体时间通过ajax（打破你的JS，因为你所有的事件不会被绑定）

这两个解决方案是编码您的JS与Turbolinks，或使用 jquery-turbolinks 实现更自然的解决方案

如果您想让当前的代码与Turbolinks一起工作，您可以使用以下代码：

  var ready = function ）{
 
 var array = [.section-1，.section-2，.section-3，.section-4，.section-5]; 
 var cnt = 0; （var i = 0; i <5; i ++）{
 $（array [i]）。hide（）; 
 
。 
} 
 $（array [cnt]）。show（）; 
 $（。previous）。hide（）; 
 $（。next）。click（function（）{
 if（cnt< 4）{
 $（array [cnt]）。hide（）; 
 cnt ++; 
 $（array [cnt]）。show（）; 
} 
 if（cnt == 4）{
 $（。next）。hide（） ; 
} 
 if（cnt> 0）{
 $（。previous）。show（）; 
} 
 
}）;如果（cnt> 0）{
 $（array [cnt]），点击（函数（）{
 
）。
 
 $（。previous hide（）; 
 cnt--; 
 $（array [cnt]）。show（）; 
} 
 
 
 if（cnt< 4）{
 $（。next）。show（）; 
} 
 if（cnt == 0）{
 $（。previous）。hide ）; 
} 
 
}）; 
}）; 
 
 $（document）.on（page：load ready，ready）; 
  

I have a simple script to hide and show certain buttons, but the javascript doesn't run until a page is reloaded. How can I get it to run as soon as a user clicks that link? For example, have the page already hide certain divs the first time a user links to the page.

var array = [".section-1", ".section-2", ".section-3", ".section-4", ".section-5"];

var cnt = 0;

$(function() {
    for(var i = 0; i < 5; i++) {
        $(array[i]).hide();
    }
    $(array[cnt]).show();
    $(".previous").hide();
    $(".next").click(function () {
        if(cnt < 4){
            $(array[cnt]).hide();
            cnt++;
            $(array[cnt]).show();
        }
        if (cnt == 4) {
            $(".next").hide();
        }
        if(cnt > 0) {
            $(".previous").show();
        }

    });

    $(".previous").click(function (){

        if(cnt > 0) {
            $(array[cnt]).hide();
            cnt--;
            $(array[cnt]).show();
        }


        if(cnt < 4){
            $(".next").show();
        }
        if(cnt == 0){
            $(".previous").hide();
        }

    });
});

Here is the manifest file.

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require users

解决方案

Your problem is with turbolinks

The issue is that Turbolinks prevents your JS from loading "normally" as it reloads the body of your page each time via ajax (breaking your JS as all your events won't be bound)

The two solutions to this are to code your JS to work with Turbolinks, or to use jquery-turbolinks to achieve a more natural solution

If you wanted to get your current code to work with Turbolinks, you could use this:

var ready = function(){

    var array = [".section-1", ".section-2", ".section-3", ".section-4", ".section-5"];
    var cnt = 0;

    for(var i = 0; i < 5; i++) {
        $(array[i]).hide();
    }
    $(array[cnt]).show();
    $(".previous").hide();
    $(".next").click(function () {
        if(cnt < 4){
            $(array[cnt]).hide();
            cnt++;
            $(array[cnt]).show();
        }
        if (cnt == 4) {
            $(".next").hide();
        }
        if(cnt > 0) {
            $(".previous").show();
        }

    });

    $(".previous").click(function (){

        if(cnt > 0) {
            $(array[cnt]).hide();
            cnt--;
            $(array[cnt]).show();
        }


        if(cnt < 4){
            $(".next").show();
        }
        if(cnt == 0){
            $(".previous").hide();
        }

    });
});

$(document).on("page:load ready", ready);

这篇关于在页面刷新之前，JQuery不会运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！