外部JSファイルの実行後に実行

以下のようなコードで、セレクトボックスの変更によって、
★の処理を実行したいのですが、
ページ最下部にある外部JSの処理が最後に行われてしまい、
★の処理が完了後に外部JSの処理で上書きされてしまいます。

外部JSも以下セレクトボックスの変更によって処理が実行される仕組みになっていて、
セレクトボックスを変更すると、★の処理と外部JSの処理が実行され、
外部JSのほうが後に処理されてしまうようです。

<select class="options" name="options">
<option value="A">A</option>
<option value="B">B</option>
</select>

<script text="text/javascript">
$(function($) {
<!-- セレクトボックスの変更で処理実行-->
$('.options').change(function() {
★ 外部JSの実行後に実行したいこと
});
});
</script>

<!-- 外部JS -->
<script type="text/javascript" src="other.js" ></script>

外部JSは、位置を動かすことも、中身を変更することもできません。
こういった場合、処理の実行の順番を制御する方法はありますでしょうか？

kei344

2017/07/07 13:00

「上書き」とはどのような挙動でしょうか。ある程度具体的に書いていただけませんか？

momo_monom

2017/07/07 13:25

replaceで文字を置換えようとしているのですが、★で処理した文字に一瞬切り替わってから、外部JSの処理した文字にまた切り替わってしまう現象です。

行動規範の内容に同意します

回答2件

このあたりを試してみてはいかがでしょう。

【jQueryで設定したイベントのバブリングと実行順について - Qiita】
http://qiita.com/clomie/items/394183b62393ea73a0ac

【jQuery のイベントハンドラの順番を入れ替える - Qiita】
http://qiita.com/shuhei/items/0b80c979435425500a51

投稿2017/07/07 13:54

kei344

総合スコア69398

ベストアンサー

以下のように行ってはいかがでしょうか？

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<label>
9    <select class="options" name="options">
10        <option value="A">A</option>
11        <option value="B">B</option>
12    </select>
13</label>
14<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
15<script type="text/javascript">
16    $(function ($) {
17        $('.options').change(function () {
18            document.body.appendChild(
19                $("<script>").prop(
20                    {
21                        src: "other.js"
22                    }
23                )[0]
24            );
25            console.log("message1");
26        });
27    });
28</script>
29</body>
30</html>

other.jsの内容

javascript
1console.log("message2");

投稿2017/07/07 12:54

s8_chu

総合スコア14731

momo_monom

2017/07/07 13:23

ありがとうございます！試してみたところ、上手くいきませんでした。。。外部JSの中でも $('.options').change と同様のことが行われていて、外部JSの処理が最後になってしまうようです。

s8_chu

2017/07/07 13:25

> 外部JSの中でも $('.options').change と同様のことが行われていてとは、どういう意味なのでしょうか？また、こちらでは回答文のコードで message2 message1 という結果になることを確認できるのですが、どのように結果を確認していますか？

momo_monom

2017/10/11 15:40

ご提案いただいたコードを当てはめて試してみたのですが、外部JSを読み込んでいる<script type="text/javascript" src="other.js" ></script>は、</body>の直前に配置されていて、最終的にother.js内の $('.options').change の処理が行われてしまっているような感じです。ASPサービスを利用しているため、外部JSの読み込みコード／外部JS内のコードの改変ができず、このような状況になっておりました。

行動規範の内容に同意します

あなたの回答