How to Fix jQuery's `ready` Event Failure with Rails 4 and Turbo-Links?

DOM Event Handling in Rails 4 with Turbo-Links

jQuery's 'Ready' Event Not Firing After Initial Page Load?

For Rails 4 applications implementing the asset pipeline, the need to manage JS organization arises. Users may encounter issues where jQuery's ready event fails to trigger on subsequent link clicks due to Turbo-Links.

Understanding Turbo-Links' Impact

Turbo-Links enhances navigation by performing page transitions without full reloads. This optimization prevents the ready event from firing after the first page load, as subsequent link clicks only update the page's content.

Resolving the Issue

To ensure jQuery events function seamlessly with Turbo-Links, the following approach is recommended:

CoffeeScript Version

ready = ->
  # Place your CoffeeScript code here
$(document).ready(ready)
$(document).on('page:load', ready)

The 'page:load' event is triggered by Turbo-Links and provides a reliable substitute for the ready event.

JavaScript Version

var ready;
ready = function() {
  # Insert your JavaScript code here
};
$(document).ready(ready);
$(document).on('page:load', ready);

Rails 5 Update

For Rails 5, Turbo-Links 5 includes a turbolinks:load event that fires on both initial and subsequent page loads. This simplifies the solution:

$(document).on('turbolinks:load', function() {
  # Add your JavaScript code here
});

By implementing this approach, jQuery events will execute as expected within Rails 4 applications utilizing Turbo-Links.

The above is the detailed content of How to Fix jQuery's `ready` Event Failure with Rails 4 and Turbo-Links?. For more information, please follow other related articles on the PHP Chinese website!