4 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법

해결법

1.여기에 내가 무엇을 ... 커피 스크립트 :

여기에 내가 무엇을 ... 커피 스크립트 :
```
ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)
```
마지막 줄은 터보 링크가 트리거 무엇 페이지로드를 수신합니다.

편집 ... (요청에 따라) 자바 스크립트 버전을 추가 :
```
var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);
```
편집 2 ... 용 레일 (5) (Turbolinks 5) 페이지 : 부하가 turbolinks된다 : 부하, 심지어 초기로드에 발사 될 것이다. 우리는 다음을 수행 할 수 있습니다 :
```
$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});
```
2.난 그냥이 문제를 해결하기위한 또 다른 옵션으로 배웠습니다. 당신이 JQuery와 - turbolinks 보석을로드 할 경우 일반적인 방법으로 jQuery를 쓸 수 있도록이 document.ready 이벤트에 레일 Turbolinks 이벤트를 바인딩합니다. 당신은 (기본적으로 : application.js)를 오른쪽 JS 매니페스트 파일에서 JQuery와 후 jquery.turbolinks를 추가합니다.

난 그냥이 문제를 해결하기위한 또 다른 옵션으로 배웠습니다. 당신이 JQuery와 - turbolinks 보석을로드 할 경우 일반적인 방법으로 jQuery를 쓸 수 있도록이 document.ready 이벤트에 레일 Turbolinks 이벤트를 바인딩합니다. 당신은 (기본적으로 : application.js)를 오른쪽 JS 매니페스트 파일에서 JQuery와 후 jquery.turbolinks를 추가합니다.
3.최근에 나는 그것을 다루는 가장 깨끗하고 이해하기 쉬운 방법을 발견 :

최근에 나는 그것을 다루는 가장 깨끗하고 이해하기 쉬운 방법을 발견 :
```
$(document).on 'ready page:load', ->
  # Actions to do
```
또는
```
$(document).on('ready page:load', function () {
  // Actions to do
});
```
편집하다 (동일한 기능이 여러 번 실행하는 원인)로드 이벤트 : 문서에 바인딩 이벤트를 위임 한 경우, 그렇지 않으면 모든 페이지에 반동을 얻을 것이다, 당신은 준비 기능의 외부에 첨부해야합니다. 예를 들어,이 같은 모든 호출이있는 경우 :
```
$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...
```
다음과 같이 준비 기능을 꺼내 :
```
$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...
```
문서에 바인딩 위임 이벤트가 준비 이벤트에 바인딩 할 필요가 없습니다.
4.레일에 DemoZluk의 솔루션과 유사하지만 약간 짧은 4 문서를이 발견 :

레일에 DemoZluk의 솔루션과 유사하지만 약간 짧은 4 문서를이 발견 :
```
$(document).on 'page:change', ->
  # Actions to do
```
또는
```
$(document).on('page:change', function () {
  // Actions to do
});
```
외부 스크립트가있는 경우 재 작성 성가 시게 할 수없는 경우 전화 $ (문서) (.ready) 또는 모든 자바 스크립트를 기존,이 보석은 TurboLinks와 (문서) (.ready) $ 계속 사용하실 수 있습니다 것을 :은 https : //github.com/kossnocorp/jquery.turbolinks
5.새로운 레일 가이드에 따라 올바른 방법은 다음을 수행하는 것입니다 :

새로운 레일 가이드에 따라 올바른 방법은 다음을 수행하는 것입니다 :
```
$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});
```
또는, 커피 스크립트에서 :
```
$(document).on "turbolinks:load", ->
alert "page has loaded!"
```
.ready 단 하나의 이벤트 해고 될 이벤트 $ (문서)을 듣지 마십시오. 어떤 놀라움은, 필요는 jquery.turbolinks 보석을 사용하지합니다.

레일 4.2 이상으로이 작품뿐만 아니라 5 레일.

6.주 : @ 깨끗한위한 SDP의 해답, 내장 된 솔루션

주 : @ 깨끗한위한 SDP의 해답, 내장 된 솔루션

다음과 같이 나는 그것을 고정 :

다른 응용 프로그램에 의존 JS 파일은 다음과 같이 순서를 포함 변경으로 포함하기 전에 당신이 application.js을 포함해야합니다 :

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

핸들은 application.js 바인딩하는 전역 함수를 정의

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

지금 당신은 물건을 같이 바인딩 할 수 있습니다 :

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

7.나를 위해 위의 작품 중에, 나는 .ready jQuery의 $ (문서)를 사용하지 않음으로써이 문제를 해결하지 않지만 사용하여 addEventListener 대신.

나를 위해 위의 작품 중에, 나는 .ready jQuery의 $ (문서)를 사용하지 않음으로써이 문제를 해결하지 않지만 사용하여 addEventListener 대신.
```
document.addEventListener("turbolinks:load", function() {
  // do something
});
```

8.

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

9.당신은 사용해야합니다 :

당신은 사용해야합니다 :
```
document.addEventListener("turbolinks:load", function() {
  // your code here
})
```
turbolinks의 문서에서.
10.중 하나를 사용

중 하나를 사용
```
$(document).on "page:load", attachRatingHandler
```
또는 동일한 효과를 얻을 CSTE 연구진 jQuery의 함수를 사용하여
```
$(document).on 'click', 'span.star', attachRatingHandler
```
자세한 내용은 여기를 참조하십시오 http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html
11.부하 트리거 : 대신 "준비"기능과 결합 그 사건을 저장할 변수를 사용하여, 당신은 할 때마다 페이지 준비 이벤트를 트리거 할 수 있습니다.

부하 트리거 : 대신 "준비"기능과 결합 그 사건을 저장할 변수를 사용하여, 당신은 할 때마다 페이지 준비 이벤트를 트리거 할 수 있습니다.
```
$(document).on('page:load', function() {
  $(document).trigger('ready');
});
```
12.여기에 내가 일이 두 번 실행되지 않도록하기 위해 수행 한 내용은 다음과 같습니다

여기에 내가 일이 두 번 실행되지 않도록하기 위해 수행 한 내용은 다음과 같습니다
```
$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});
```
$ (문서) CSTE 연구진 ( "페이지 : 변화") 또는 사용 : 나는 JQuery와 - turbolinks 보석을 사용 또는 $를 (문서) .ready와 $ (문서) CSTE 연구진 ( "로드 페이지")를 결합 찾을 자체 것은 unexpectedly- 동작 - 특히 당신은 개발에 있다면.
13.나를 위해 좋은 일을하고 다음의 사용을 자세히 다음 문서를 발견 :

나를 위해 좋은 일을하고 다음의 사용을 자세히 다음 문서를 발견 :
```
var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)
```
14.내가 Turbolinks 5 사람들 업그레이드를 위해 여기를 떠날 거라고 생각 : 코드를 해결하는 가장 쉬운 방법에서 이동하는 것입니다 :

내가 Turbolinks 5 사람들 업그레이드를 위해 여기를 떠날 거라고 생각 : 코드를 해결하는 가장 쉬운 방법에서 이동하는 것입니다 :
```
var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)
```
에:
```
var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);
```
참조 : https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

15.

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

16.테스트 많은 솔루션은 마침내왔다. 이 많은 코드가 확실히 두 번 호출되지 않습니다.

테스트 많은 솔루션은 마침내왔다. 이 많은 코드가 확실히 두 번 호출되지 않습니다.

VAR는 = 거짓 has_loaded; VAR 준비 = 함수 () { 경우 {(! has_loaded) has_loaded 사실 =; // YOURJS 여기 } } $ (문서) .ready (준비); $ (문서) .bind ( '페이지 : 변화', 대기);
17.나는 보통 내 레일 4 개 프로젝트에 대해 다음을 수행하십시오

나는 보통 내 레일 4 개 프로젝트에 대해 다음을 수행하십시오

application.js에서
```
function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}
```
그리고 대신에 $ 사용하는의 .js 파일의 나머지 부분에서 (함수 () {}) 나는 전화의 onInit (함수 () {})
18.첫째, JQuery와 - turbolinks 보석을 설치합니다. 그리고, 그것의 에 application.html.erb의 몸의 끝에서 포함 된 자바 스크립트 파일을 이동하는 것을 잊지 마세요.

첫째, JQuery와 - turbolinks 보석을 설치합니다. 그리고, 그것의 에 application.html.erb의 몸의 끝에서 포함 된 자바 스크립트 파일을 이동하는 것을 잊지 마세요.

당신은 속도 최적화 이유로 바닥 글에서 응용 프로그램의 자바 스크립트 링크를 넣어 경우, 여기에 설명 된 바와 같이, 당신은 너무 태그로 이동해야합니다 그것이로드 태그의 콘텐츠 전에. 이 솔루션은 날 위해 일했습니다.
19.부하를 내가 사용 있도록 : 나는 준비 turbolinks하는 기능을 사용할 때 제 기능을 두 배로 발견

부하를 내가 사용 있도록 : 나는 준비 turbolinks하는 기능을 사용할 때 제 기능을 두 배로 발견
```
var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};
```
그 방법 turbolinks이 지원되는 경우 귀하의 기능을 두 번하지 않습니다!

from https://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 애니메이션의 backgroundColor (0)	2020.09.23
[JQUERY] 하이라이트 / 선택한 텍스트를 가져옵니다 (0)	2020.09.23
[JQUERY] 왜 페이지로드 즉시 클릭 이벤트 처리기 화재는 무엇입니까? (0)	2020.09.23
[JQUERY] 이미지로드에 jQuery를 콜백 (이미지가 캐시 된 경우에도) (0)	2020.09.23
[JQUERY] JQuery와 APPEND SVG 요소와 작동하지? (0)	2020.09.23

복붙노트

[JQUERY] 4 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법

4 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법

해결법

1.여기에 내가 무엇을 ... 커피 스크립트 :

3.최근에 나는 그것을 다루는 가장 깨끗하고 이해하기 쉬운 방법을 발견 :

4.레일에 DemoZluk의 솔루션과 유사하지만 약간 짧은 4 문서를이 발견 :

5.새로운 레일 가이드에 따라 올바른 방법은 다음을 수행하는 것입니다 :

6.주 : @ 깨끗한위한 SDP의 해답, 내장 된 솔루션

7.나를 위해 위의 작품 중에, 나는 .ready jQuery의 $ (문서)를 사용하지 않음으로써이 문제를 해결하지 않지만 사용하여 addEventListener 대신.

8.

9.당신은 사용해야합니다 :

10.중 하나를 사용

11.부하 트리거 : 대신 "준비"기능과 결합 그 사건을 저장할 변수를 사용하여, 당신은 할 때마다 페이지 준비 이벤트를 트리거 할 수 있습니다.

12.여기에 내가 일이 두 번 실행되지 않도록하기 위해 수행 한 내용은 다음과 같습니다

13.나를 위해 좋은 일을하고 다음의 사용을 자세히 다음 문서를 발견 :

14.내가 Turbolinks 5 사람들 업그레이드를 위해 여기를 떠날 거라고 생각 : 코드를 해결하는 가장 쉬운 방법에서 이동하는 것입니다 :

15.

16.테스트 많은 솔루션은 마침내왔다. 이 많은 코드가 확실히 두 번 호출되지 않습니다.

17.나는 보통 내 레일 4 개 프로젝트에 대해 다음을 수행하십시오

18.첫째, JQuery와 - turbolinks 보석을 설치합니다. 그리고, 그것의 에 application.html.erb의 몸의 끝에서 포함 된 자바 스크립트 파일을 이동하는 것을 잊지 마세요.

19.부하를 내가 사용 있도록 : 나는 준비 turbolinks하는 기능을 사용할 때 제 기능을 두 배로 발견

'JQUERY' 카테고리의 다른 글

티스토리툴바