> 웹 프론트엔드 > JS 튜토리얼 > 레일 4와 5에서 터보 링크와 함께 $(document).ready()를 사용하는 방법은 무엇입니까?

레일 4와 5에서 터보 링크와 함께 $(document).ready()를 사용하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-12-13 17:47:10
원래의
220명이 탐색했습니다.

How to Use $(document).ready() with Turbo Links in Rails 4 and 5?

Rails 4에서 Turbo-Link와 함께 $(document).ready() 활용

Rails 4에서는 JavaScript 파일을 별도의 엔터티로 구성하고 컴파일하는 것이 일반적입니다. 자산 파이프라인을 사용합니다. 그러나 터보 링크가 활성화된 경우 jQuery의 "ready" 이벤트를 사용하면 문제가 발생할 수 있습니다. 터보 링크는 전체 페이지 다시 로드를 방지하므로 후속 페이지 클릭 시 "준비" 기능 내에서 코드 실행이 방지됩니다.

해결책:

jQuery가 제대로 작동하는지 확인하려면 터보 링크가 있는 이벤트에서는 다음을 활용하세요. Approach:

CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)
로그인 후 복사

여기서 추가 라인은 다음에 의해 트리거되는 'page:load' 이벤트를 수신합니다. 터보 링크.

JavaScript:

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);
로그인 후 복사

Rails 5의 대안(Turbolinks 5):

Rails 5 두 가지 모두에서 실행되는 새로운 이벤트 'turbolinks:load'를 소개합니다. 초기 및 후속 페이지 로드. 이를 통해 솔루션을 단순화할 수 있습니다.

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});
로그인 후 복사

이 접근 방식을 사용하면 터보 링크가 활성화될 때 jQuery 이벤트가 예상대로 실행되어 Rails 4 애플리케이션에서 JavaScript 기능이 원활하게 작동할 수 있습니다.

위 내용은 레일 4와 5에서 터보 링크와 함께 $(document).ready()를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿