実現したいこと
JavaScriptからjQueryへの書き換えが、挙動の違いにより期待通りにできません。
問題の箇所だけJavaScriptのままにすることはできますが、可能であればjQueryに書き換えたいと思いますので、書き換え方がわかりましたらご回答願います。
また、書き換え方でなくても挙動の違いについての情報がありましたらコメント頂けると幸いです。
前提
前の質問の続きになります。
「動的に読み込むJavaScriptの実行が完了したタイミングで処理をしたい」
https://teratail.com/questions/113kp7s0kssjvg
発生している問題・エラーメッセージ
head要素にscript要素を動的に追加した場合、JavaScriptのappendChild()だとloadイベントが発生しますが、jQueryのappend()だと発生しません。
該当のソースコード
debug.js
1const message = 'debug mode'
index.html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> 2<script> 3$(async () => { 4 const $script = $('<script />').prop('src', './debug.js') 5 const promise = new Promise(resolve => $script.on('load', () => { console.log('on load'); resolve() })) 6 $('head').append($script) // jQuery 7 //document.head.appendChild($script[0]) // JavaScript 8 await promise 9 console.log(message) 10}) 11</script> 12<button onclick='console.log(message)'>click</button>
index.htmlをブラウザで開くとコンソールに'on load'と'debug mode'が出力されてほしいですが、いずれも出力されません。
ボタンクリック時には'debug mode'が出力されます。
試したこと
jQueryの行をコメントアウトしてJavaScriptの行のコメントを解除すると期待通りに動作します。
補足情報(FW/ツールのバージョンなど)
Windows10 Pro
Chrome 108.0.5359.126
回答2件