Turbolinks
È probabilmente avete un problema con Turbolinks
(considerando che hai incluso nella vostra pipeline di attività); anche se questo potrebbe non essere il problema.
Turbolinks ha lo scopo di velocizzare i tempi di caricamento della pagina caricando il tag <body>
delle nuove pagine con ajax
, mantenendo intatto il tag <head>
. Questo significa che la tua applicazione carica solo l'HTML di cui ha bisogno, ma crea problemi con il JS sulla tua pagina.
Se hai il tuo JS
due volte licenziato, si potrebbe essere un segno che Turbolinks sta interferendo con il vostro JS. Poiché non hai incluso alcun esempio dallo logs
, non sarò in grado di fornirti alcuna informazione specifica, ma dovresti essere in grado di testare rimuovendo l'inclusione dello dallo layout
e dal file JS manifest application
:
#app/views/layouts/application.html.erb
= javascript_include_tag "application", "data-turbolinks-track" => false
#app/assets/javascripts/application.js
//= require turbolinks -> remove this line
Se si esegue questa operazione, riavviare il server & ricaricare la pagina in questione. Se si tratta ancora indietro con la funzionalità errata, significa Turbolinks non è il problema (e si dovrebbe ripristinare tutte le cose che cambiato)
-
Eventi
L'altro problema che si potrebbe avere come stai chiamando/innescando i tuoi eventi. Questo potrebbe essere verso il basso per una serie di motivi, ma si dovrebbe assolutamente guardare come si sta chiamando tua JS:
#app/assets/javascripts/application.js
$(document).on("click", ".element", function(){
//your stuff here
});
Deleghiamo sempre dall'elemento document
del DOM ora. Anche se questo potrebbe causare alcuni problemi con le risorse, abbiamo scoperto che rende le app Rails molto più robuste con la pipeline di asset, in quanto consente di identificare realmente gli elementi sulla pagina.
Se si sta tentando di attivare un evento da un singolo oggetto sul DOM, è possibile che JS "catturi" l'evento due volte (per qualsiasi motivo), causando il problema. Prova delegando gli eventi che vengono chiamato due volte
-
Funzioni
Infine, la functions
potrebbe essere il problema.
Se si dispone di anonymous functions o di funzioni per eventi specifici, è necessario assicurarsi che possano essere richiamati correttamente. Si dovrebbe fare questo usando page events in JS & Turbolinks:
#app/assets/javascripts/application.js
var your_function = function() {
//stuff here
};
$(document).on("page:load ready", your_function);
Non uso i turbolinks, a meno che non sia automaticamente incluso nei binari 3.2.13 – user2158382
o meno che non sia incluso nel bootstrap 3 – user2158382
Grazie per l'ottima spiegazione Richard –