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

Question

I'm using this tutorial to load page specific JavaScript in my Rails app. My file structure looks like this:

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

I precompile my assets with config.assets.precompile += %w( *-bundle.js ) and the file dashboard-bundle.js simply includes the line //= require_tree ./dashboard/ . Then, on my page where I want to JavaScript to be loaded, I include the JavaScript with = javascript_include_tag 'dashboard-bundle' .

Here's a sample of what part of my settings.js file looks like:

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

When I first load the page from another page, both alerts appear at the appropriate time; the first on page load and the second when I click the #renderChart1 button.

However, when I reload the page without going to another page first, only the first alert works correctly. When clicking on the button, the alert does not appear.

I've already tried installing jQuery Turbolinks but that did not solve the problem.

Answer 1

I think #renderChart1 was added to DOM after binding .click() method for it, and you should move to document.ready to make sure that element was loaded into DOM, like this:

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