Wie kann der „ready'-Ereignisfehler von jQuery mit Rails 4 und Turbo-Links behoben werden?

DOM-Ereignisbehandlung in Rails 4 mit Turbo-Links

Das „Ready“-Ereignis von jQuery wird nach dem ersten Laden der Seite nicht ausgelöst?

Für Rails 4-Anwendungen Durch die Implementierung der Asset-Pipeline entsteht die Notwendigkeit, die JS-Organisation zu verwalten. Benutzer können auf Probleme stoßen, bei denen das Bereitschaftsereignis von jQuery bei nachfolgenden Linkklicks aufgrund von Turbo-Links nicht ausgelöst wird.

Auswirkungen von Turbo-Links verstehen

Turbo-Links verbessert die Navigation, indem Seitenübergänge ohne Vollständigkeit durchgeführt werden lädt nach. Diese Optimierung verhindert, dass das Ready-Ereignis nach dem Laden der ersten Seite ausgelöst wird, da nachfolgende Linkklicks nur den Inhalt der Seite aktualisieren.

Behebung des Problems

Um sicherzustellen, dass jQuery-Ereignisse nahtlos mit Turbo-Links funktionieren, Folgende Vorgehensweise wird empfohlen:

CoffeeScript-Version

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

Das Ereignis „page:load“ wird ausgelöst durch Turbo-Links und bietet einen zuverlässigen Ersatz für das fertige Ereignis.

JavaScript-Version

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

Rails 5-Update

Für Rails 5 enthält Turbo-Links 5 einen Turbolinks :load-Ereignis, das sowohl beim ersten als auch bei nachfolgenden Seitenladevorgängen ausgelöst wird. Dies vereinfacht die Lösung:

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

Durch die Implementierung dieses Ansatzes werden jQuery-Ereignisse wie erwartet in Rails 4-Anwendungen ausgeführt, die Turbo-Links verwenden.

Das obige ist der detaillierte Inhalt vonWie kann der „ready'-Ereignisfehler von jQuery mit Rails 4 und Turbo-Links behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!