JQuery가 페이지 새로 고침까지 실행되지 않습니다.

Question

특정 버튼을 숨기고 표시하는 간단한 스크립트가 있지만 페이지가 다시로드 될 때까지는 JavaScript가 실행되지 않습니다. 사용자가 링크를 클릭하자마자 실행하려면 어떻게해야합니까? 예를 들어 사용자가 처음 페이지에 링크하면 특정 div가 이미 숨겨집니다.

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(); 
     } 

    }); 
}); 

다음은 매니페스트 파일입니다.

// 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 

Answer 1

귀하의 문제는 turbolinks

문제 함께이 모든 이벤트가되지 않습니다으로 (당신의 JS를 깨는 페이지의 몸을 아약스를 통해 때마다 다시로드로 Turbolinks는 "일반적으로"로드에서 JS을 방지한다는 것입니다 이것에

두 솔루션은 Turbolinks와 함께 작동하도록 JS를 코딩하거나 Turbolinks 작업을 현재의 코드를 얻으려면 원하는 경우

더 자연스러운 솔루션을 달성하기 위해 jquery-turbolinks를 사용하는) 당신이 할 수있다 바인딩 이것을 사용하십시오 :

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); 

Answer 2

이것은 CSS의 일처럼 보입니다. CSS를 사용하여 페이지가로드되기 전에 div의 표시 속성을 "none"으로 설정 한 다음 자바 스크립트가 실행되기 시작하면 표시 여부를 결정할 수 있습니다.

나중에 참조 할 때 참고로 페이지가 새로 고침 될 때까지 JS가 실행되지 않는 이유는 페이지가로드 될 때까지 실행되지 않는 $(function() {}) 메서드의 모든 자바 스크립트가 있기 때문입니다.

코드를 즉시 실행하기 위해 준비 함수 외부에 일부 코드 행을 추가 할 수도 있습니다. 이것은 자바 스크립트가 깨져서 페이지 로딩을 막을 수 있기 때문에 덜 바람직합니다.