javascript - $( 文档 ).on ('turbolinks:load' , function() { 不起作用

Question

我正在尝试让我的 Turbolinks 文档准备好工作。我的代码很简单

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})

这是使用 Rails 6。该代码位于我的 application.js 文件的中间:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
// Loads all Semantic javascripts
//= require jquery
//= require semantic-ui
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

$(document).on('turbolinks:load', function() {
$('.message .close')
  .on('click', function() {
    $(this).closest('.message').transition('fade');
  })
;
})

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})

我的 gemfile 中有 jquery 和 Turbolinks gem，并且 bundle 已安装。目前没有显示控制台日志，但也没有错误消息。

Answer 1

问题是您的 mainfest 中没有 require_self 指令。

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
// Loads all Semantic javascripts
//= require jquery
//= require semantic-ui
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_self
//= require_tree .

它是一个单独的指令的原因是它可以让您影响文件的编译顺序。