Microsoft EdgeにおけるjavaScript(jQuery)の動作について

いつもお世話になっております。

表題にもございますが、ブラウザ【Microsoft Edge】におけるjavaScript(jQuery)の動作についてご質問させてください。

現在、javaScriptでリンクのクリックに応じて画面内のリンクの表示、非表示を制御しており、
同社ブラウザのIE11、Google Chrome、FireFoxにおいてはjavaScriptによるCSSの改変後
画面にすぐに反映されるのですが、EdgeのみCSSが反映されず、マウスオーバーもしくは
該当部分をドラッグをすることでCSSが反映されるような状態となっております。
(※マウスオーバーに関するCSS、javaScriptの記載はありません)

上記の状態となる原因について調べてみましたが、直接解決できる情報が見つからない状態です。
お手数ですが、情報をお持ちでしたらお教えいただければと思います。

一応ですが、該当部分のHTML(抜粋)とjavaScript(抜粋)を記載いたします。
現在の問題点としては「追加」のリンクを押下した後、表示された「確定」「取消」リンクを
クリックした際に「確定取消リンク(追加)click」部分のメソッドが起動し、
「確定」「取消」リンクを非表示にする処理が走りますが、「取消」リンクが表示されたままになってしまっている状態です。

html
1<table>
2	<tr>
3		<td class="link1">
4			<a id="addLink" class="addLink" href="#">追加</a>
5			<a id="fixLink" class="fixLink" href="#" style="display:none;">確定</a>
6		</td>
7		<td class="link2">
8			**<a id="addcanLink" class="addcanLink" href="#" style="display:none;">取消</a>**
9		</td>
10		<td class="MaMembertype">
11			セル内容
12		</td>
13		<td class="MaRatesType">
14			セル内容
15		</td>
16		<td class="MaAmount">
17			セル内容
18		</td>
19		<td class="MaFreeAcount">
20			セル内容
21		</td>
22	</tr>
23</table>

javaScript
1(jQuery)
2	//
3	// 追加リンクclick
4	//
5	$('.addLink').on().click(function(){
6
7		// 表示 リンク
8		$('#fixLink').show();		// 確定リンク
9		$('#addcanLink').show();	// 追加取消リンク
10
11		// 非表示 リンク
12		$('#addLink').hide();		// 追加リンク
13
14		//submitしない
15		return false;
16	});
17
18
19	//
20	// 確定リンク(追加)click
21	//
22	$('.fixLink').on().click(function(){
23
24		// 表示 リンク
25		$('#addLink').show();		// 追加リンク
26
27		// 非表示 リンク
28		$('#fixLink').hide();		// 確定リンク
29		**$('#addcanLink').hide();	// 追加取消リンク**
30
31		//submitしない
32		return false;
33	});
34
35
36	//
37	// 確定取消リンク(追加)click
38	//
39	$('.addcanLink').on().click(function(){
40
41		// 表示 リンク
42		$('#addLink').show();		// 追加リンク
43
44		// 非表示 リンク
45		$('.fixLink').hide();		// 確定リンク
46		**$('.addcanLink').hide();	// 追加取消リンク**
47
48		//submitしない
49		return false;
50	});

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

回答3件

期待する動作とは、初期画面では［追加］だけが表示されていて、それをクリックすると［追加］は消えて［確定］と［取消］が表示され、そのどちらかをクリックすると［確定］［取消］の両方が消えて［追加］が表示されるということでいいのですよね？

であれば自分の環境の Edge（下記）で上記の期待する動作になります。

Windows 10 Pro 64-bit v1803 (OS ビルド 17134.112)
Microsoft Edge 42.17134.1.0

ただし、jQuery のコードは head に入れて $(function () { ... }); で囲ったのと、html のコードは以下のように必要最低限に削りましたが。

<table>
    <tr>
        <td class="link1">
            <a id="addLink" class="addLink" href="#">追加</a>
            <a id="fixLink" class="fixLink" href="#" style="display:none;">確定</a>
        </td>
        <td class="link2">
            <a id="addcanLink" class="addcanLink" href="#" style="display:none;">取消</a>
        </td>
    </tr>
</table>

何か違うのか確認ください。

投稿2018/06/18 06:33

退会済みユーザー

総合スコア0

S.niranira

2018/06/18 06:45

ご回答ありがとうございます。ご認識の通りの動作ができることを期待しておりました。ちょうど私の環境でも(多分)解決しました。自環境において、元々idやclassについて「XXX_addLink」といった形での記述をしていたのですが、jsファイルを複数画面で使用することになったため、「XXX_」の部分を全て削除したところ、Microsoft Edgeで問題なく動作するようになりました。(再発した場合には再度対策を考えます…) 他のブラウザでは動作するのにEdgeのみ変わった挙動をするのは未だに疑問ではございますが、”一応”解決ということにいたします。ありがとうございます。

退会済みユーザー

2018/06/18 07:13

少なくとも質問に書いてあるコードは Edge でも何でも問題ないのですよね。ということは、問題のないコードを質問に書いて、問題があると言っていたということになるのですが…

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