[jquery] JQuery는 Rails 4 애플리케이션에서 페이지 새로 고침시에만로드됩니다.

Program / 글쓴이

Rails 4 애플리케이션을 만들고 이미지 팝업 효과를 위해 fancybox 라이브러리를 추가했습니다. 잘 작동하지만 페이지를 새로 고칠 때만 작동합니다. 사용자가 페이지를 새로 고치지 않으면 jquery가 전혀 작동하지 않습니다. 작은 jquery 메서드로 테스트 해 보았지만 모두 페이지 새로 고침 후에 만 ​​작동합니다. 트위터 부트 스트랩도 사용하고 있습니다.

내 assets / application.js 파일 :

//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .


$(document).ready(function() {
  $(".fancybox").fancybox();
    $("#hand").click(function(){
     if($("#check6").is(':visible'))
     {
      $("#check6").hide();
      }
     else
     {
      $("#check6").show();
      }
    });
});

답변

알겠습니다. 답변을 제공 할만큼 귀하의 문제를 이해 한 것 같습니다. 터보 링크 사용에 대한 것은 터보 링크가 브라우저가 페이지를 다시로드하는 것을 방지하기 때문에 문서 준비 이벤트에 바인딩하는 대부분의 플러그인과 라이브러리가 작동을 멈춘다는 것입니다. 이러한 문제를 해결하는 트릭이 있지만 가장 쉬운 해결 방법은 jquery.turbolinks 를 사용하는 것입니다 .

그것을 사용하려면 다음을 추가하십시오 Gemfile.

gem 'jquery-turbolinks'

그리고 이것은 당신의 assets/javascripts/application.js파일에 :

//= require jquery.turbolinks

그리고 당신은 잘 가야합니다.

참고 : 터보 링크를 사용할 필요 는 없지만 유용하며 전체 페이지 새로 고침을 피하여 요청을 더 빠르게 만듭니다. Turbolinks는 AJAX를 통해 클릭 한 링크의 콘텐츠를 가져와 동일한 페이지에 렌더링하므로 자산 (JS 및 CSS)을 다시로드하는 오버 헤드를 제거합니다. 페이지가 함께 작동하도록하십시오. 이전 단락의 라이브러리를 사용하면 실제 문제가 없었습니다. 페이지에 CSS와 JS가 많을수록 터보 링크를 사용하여 더 큰 향상을 얻을 수 있습니다.

답변

Ian은 좋은 대답을했고, 이것은 그것에 대한 일종의 부가 기능입니다 (그래서 글을 쓰는 시점에서 실제로 누구에게도 댓글을 달 수는 없습니다.)

에서 https://github.com/rails/turbolinks/#jqueryturbolinks :

Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:

//= require jquery.turbolinks

require jquery.turbolinks목록에서 올바른 위치에 추가하지 않았기 때문에 약간 까다로 웠습니다. 그런 다음 이것을 새로운 방법으로 추가했으며 더 잘 작동하기를 바랍니다.

답변

CodeWalrus와 Ian의 답변을 모두 따를 때까지 일을 할 수 없었지만 저에게는 더 많은 것이있었습니다. jquery.turbolinks Readme 에 설명 된 대로 순서는 매우 구체적이어야합니다.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

또한 여기 에 설명 된대로 속도 최적화를 위해 애플리케이션 자바 스크립트 링크를 바닥 글에 넣은 경우 <head>태그의 콘텐츠보다 먼저로드되도록 태그 로 이동해야합니다 <body>.

답변

여기에서 Turbolinks가 문제입니다 .Turbolinks는 웹 페이지의 성능을 향상시키기 위해 레일에 추가되었습니다.

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>

자세한 내용은 여기를 참조 하십시오.

답변

다음 코드 줄을 제거하십시오.

//= require turbolinks

그런 다음 이것을 추가하십시오.

//= require jquery.turbolinks

답변