質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

900閲覧

JavaScriptのappendChild()とjQueryのappend()で挙動が異なる

gosaro

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/02/07 05:11

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2023/02/07 06:05

append()の場合、ブラウザの開発者ツールのコンソールに何かエラーは出ていますか?
gosaro

2023/02/07 06:09

いいえ、出ていません。
guest

回答2

0

ベストアンサー

jQuery の append() などで <script> を挿入する場合、jQuery は内部でおかしなこと(*1)をしていて、load イベントは起きません。よって、load イベントを使う方針では「スクリプトがロードされた後に実行する」という処理は実現できません。
append() はスクリプトの実行が終わってから返ってくるのでやりたい処理を単純に下に続けてもいいですし、$.getScript() も使えます。

*1: 同期XHRでソースを取ってきてeval()しているとのこと

問題の箇所だけJavaScriptのままにすることはできますが、可能であればjQueryに書き換えたい

既に非 jQuery で動いているコードを jQuery に書き換えるのはやめましょう。実行スピードは間違いなく落ちますし、今回のような余計なトラブルになることがあります。

投稿2023/02/07 06:24

編集2023/02/07 06:31
int32_t

総合スコア20514

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gosaro

2023/02/07 07:06

詳しい回答ありがとうございます。 >append() はスクリプトの実行が終わってから返ってくる 恐らくこれは正しくありません。 確かに例示したようなローカルの小さなスクリプトではうまくいきましたが、リモートの大きなスクリプトではエラー(xxx is not defined)になりました。 この場合でもボタンは正常に動作しますので、非同期でスクリプトの実行が終わる前に次の処理に進んでいるものと思われます。 >$.getScript()も使えます。 これはまさに私が知りたかったことそのものです。 これを使って書き換えることにします。
guest

0

javascript

1var message="nodata"; 2$(function(){ 3 const script = $('<script>').attr('src', 'debug.js'); 4 console.log(message); 5 $('head').append(script); 6 console.log(message); 7});

debug.js

javascript

1message="debug mode";

投稿2023/02/07 06:23

yambejp

総合スコア114305

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gosaro

2023/02/07 07:12

回答ありがとうございます。 前提に書くべきでしたが、動的に読み込むスクリプトの中にはCDNで公開されているものも含まれます。 そのため、外部スクリプトの変更が必要になる方法は採用できません。 また、int32_t様からの回答へのコメントにも書きましたが、この方法ではリモートの大きなスクリプトを読み込む際に期待通りに動作しないと思われます。
yambejp

2023/02/07 07:26

誤解があるようですが、質問のしかたで外部からconstでグローバル変数を受け渡しているのでそれがどのタイミングでかきかわるか提示したのですがわかりづらかったですね? $(function(){ const script = $('<script>').attr('src', 'debug.js'); $('head').append(script); console.log(message); }); で参照できるはずです。 とはいえ外部からconstを呼ぶのは競合しそうですしmoduleとかでやる処理かもしれないですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。