在 Rails 中，只有 document.ready 代码在页面重新加载时运行

Question

我正在使用 this tutorial 在我的 Rails 应用程序中加载特定页面 JavaScript。我的文件结构如下所示：

app/assets/javascripts/
├── application.js
├── charts.coffee
├── dashboard
│   └── settings.js
├── dashboard-bundle.js
└── static_pages.coffee

我使用 config.assets.precompile += %w( *-bundle.js ) 预编译我的资产，文件 dashboard-bundle.js 只包含行 //= require_tree ./dashboard/。然后，在我想要加载 JavaScript 的页面上，我将 JavaScript 和 = javascript_include_tag 'dashboard-bundle' 包含在一起。

这是我的 settings.js 文件的一部分示例：

$(document).ready(function(){
  alert('Page and Javascript loaded!');
});
$('#renderChart1').click(function() {
  alert('You want to edit options for chart1!');
});

当我第一次从另一个页面加载该页面时，两个警告都会在适当的时间出现；第一次是在页面加载时，第二次是在我单击 #renderChart1 按钮时。

但是，当我重新加载页面而不先转到另一个页面时，只有第一个警报正常工作。单击按钮时，不会出现警报。

我已经尝试安装 jQuery Turbolinks 但这并没有解决问题。

Answer 1

我认为 #renderChart1 是在为它绑定 .click() 方法后添加到 DOM 的，你应该移动到 document.ready 以确保该元素已加载到 DOM，像这样：

$(document).ready(function(){
  alert('Page and Javascript loaded!');
  $('#renderChart1').click(function() {
    alert('You want to edit options for chart1!');
  });
});

在 Rails 中，只有 document.ready 代码在页面重新加载时运行

Only document.ready code runs on page reload in Rails

ruby-on-rails

turbolinks