初心者(自分もですが)サイトをリロードしないとjsやjQueryが動かない…なぜ???
javascriptやをjQuery実装したのにページ遷移した後に動かないけど、リロードしたら動くんですよね。
原因はhead
内の読み込みタグにターボリンク(turbolinks
)が入っているからです。
これを消してもいいのですが、このgemはページのロードをする際に少しだけ早くしてくれるため消しにくいのですよね。
そういう場合の解決方法を簡単に載せておきます。
リロードしないと反映されない時のコード
下記は、僕が実際に使って、実装したのにページ遷移した後に動かない時のコードです。
$(function () {
function post() {
$(".news-btn, .popup-bg").on("click", function () {
$(".popup-post").toggleClass("postActive");
$(".popup-bg").toggleClass("postActive");
});
}
post();
});
解決方法
下記コードを追加することによって解決できます。
document.addEventListener("turbolinks:load", function () {
$(function () {
function post() {
$(".news-btn, .popup-bg").on("click", function () {
$(".popup-post").toggleClass("postActive");
$(".popup-bg").toggleClass("postActive");
});
}
post();
});
});
これで無事にいちいちサイトをリロードせずにjsやjQueryが動きました!