3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[JavaScript]addEventListener('load')が発火してくれない問題

Last updated at Posted at 2020-09-04

問題・window.addEventListener('load', change)と記述しているのに
更新ボタンを押さないとイベントが発火してくれない

前提
changeは変数自分で命名する

change.jsの記述内容
function change(){
  item.addEventListener('keyup', function(){
 keyupした時の処理内容
  })
}
window.addEventListener('load', change)

window.addEventListener('load', change)と記述すれば
windowがloadされた時にchangeの内容が処理されるようになる

#解決方法
app/javascript/packs/application.jsの内容を書き換える

require("@rails/ujs").start()
require("turbolinks").start()#消す
require("@rails/activestorage").start()
require("channels")
require("../change")

require("turbolinks").start()
この記述を消すと解決される

#解説
turbolinksとは?
TurbolinksはRails4.0からデフォルトで導入されたgem
js, cssの読み込みを初回時に行い次回以降の読み込み処理を省略することで高速化する。

#Turbolinksの問題点
(document).ready()が発火しない
(window).load()が発火しない←今回の問題
metaタグが更新されない

#まとめ
過去保存したjs、cssをいち早く表示するようにrequire("turbolinks").start()が動作している。なのでページを開いた時、新しく追加したchange.jsを反映してくれない。
その後更新ボタンを押すとwindow.addEventListener('load', change)が発火しchange.jsで設定した処理を行ってくれる。

よってページを開いた時から追加したjsの処理を実行して欲しかったらrequire("turbolinks").start()を消す。これで過去保存したcss、jsの情報を表示しなくなり、新しく記述したデーターを読み取り表示できるようにする。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?