発生している問題
laravel Mixを使ってApp.jsにjavascriptの処理をまとめるため試してみたところ、イベントが動作しなくなってしまいました。
独自のJSファイル名はgoback.jsでして、イベントの内容は遷移前のページに戻るというものです。
なお、ビューファイルには#go-back
というボタンが存在しています。
該当のソースコード
resources/js/app.js
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); require('./goback'); //これを追記しました window.Vue = require('vue'); //以下、省略
resources/js/goback.js
'use script'; const goBack = document.getElementById('go-back'); goBack.addEventListener('click', function() { window.history.back(); })
public/js/app.js("goback"という文言に関する箇所だけ抽出しています。)
__webpack_require__(/*! ./goback */ "./resources/js/goback.js"); //中略 /***/ "./resources/js/goback.js": /*!********************************!*\ !*** ./resources/js/goback.js ***! ********************************/ /*! no static exports found */ /***/ (function(module, exports) { 'use script'; var goBack = document.getElementById('go-back'); console.log(goBack); goBack.addEventListener('click', function () { window.history.back(); }); /***/ }),
resources/layouts/app.blade.php
<!-- headタグ内で以下だけ読み込んでいます。 --> <script src="{{ asset('js/app.js') }}" defer></script>
試したこと
public/js/app.jsに記載しているconsole.log(goBack);
は正しく動作しており、デベロッパーツールのコンソールにボタンに関する情報が表示されていますのでDOMは取得できている模様です。しかし、ボタンをクリックしてもイベントは発生せず、エラーも表示されません。
なお、laravel Mixを使用せず、app.jsとgoback.jsの両方をビューファイルで読み込んだ際にはボタンのイベントは動きましたので、/resources/js/goback.js
の記載内容自体に誤りはないものと思っています。
以上より、public/js/app.js
には/resources/js
配下のjsファイルがまとめられており、goback.js
の一部も動いている様に見受けられるのですが、なぜクリックイベントがうまく動かないのかアドバイス頂けると助かります。
よろしくお願いします。
あなたの回答
tips
プレビュー