2018年9月30日 星期日

Laravel 之 javascript 事件處理失效之解法

Laravel 預設的 layouts/app.blade.php 中,預設使用 defer 載入 js/app.js

結果導致自己寫的 javascript 中 event handler 失效,似乎根本沒註冊的樣子,後來拔掉 app.js,自己加入 bootstrap 4 與相關 js,即使都有加入 defer,也都沒有問題

網路社群大大推測 app.js 似乎有做清除事件的動作,導致 app.js 因為 defer 的關係,會在頁面解析完成,頁面中的 script 執行完成之後才執行,而把我註冊的事件清除了

解決方式:

  1. 繼續使用 app.js,但不用 defer
  2. 繼續使用 defer app.js,但需要把 code 寫在 document 的 DOMContentLoaded 事件中
  3. 繼續使用 defer app.js,但需要把 code 寫在外部檔,在 app.js 之後用 script defer 引入
  4. 不使用 app.js,自行載入相關 js

參考資料:

沒有留言:

張貼留言