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

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

ただいまの
回答率

90.84%

  • JavaScript

    14827questions

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

  • jQuery

    6161questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 446

S.niranira

score 9

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

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

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

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

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

<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>
        <td class="MaMembertype">
            セル内容
        </td>
        <td class="MaRatesType">
            セル内容
        </td>
        <td class="MaAmount">
            セル内容
        </td>
        <td class="MaFreeAcount">
            セル内容
        </td>
    </tr>
</table>
(jQuery)
    //
    // 追加リンクclick
    //
    $('.addLink').on().click(function(){

        // 表示 リンク
        $('#fixLink').show();        // 確定リンク
        $('#addcanLink').show();    // 追加取消リンク

        // 非表示 リンク
        $('#addLink').hide();        // 追加リンク

        //submitしない
        return false;
    });


    //
    // 確定リンク(追加)click
    //
    $('.fixLink').on().click(function(){

        // 表示 リンク
        $('#addLink').show();        // 追加リンク

        // 非表示 リンク
        $('#fixLink').hide();        // 確定リンク
        **$('#addcanLink').hide();    // 追加取消リンク**

        //submitしない
        return false;
    });


    //
    // 確定取消リンク(追加)click
    //
    $('.addcanLink').on().click(function(){

        // 表示 リンク
        $('#addLink').show();        // 追加リンク

        // 非表示 リンク
        $('.fixLink').hide();        // 確定リンク
        **$('.addcanLink').hide();    // 追加取消リンク**

        //submitしない
        return false;
    });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

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

であれば自分の環境の 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 15:45

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

    キャンセル

  • 2018/06/18 16:13

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

    キャンセル

0

.on().click(function(){

.on('click',function(){
ではないのですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/18 14:17

    ご回答ありがとうございます。
    開発者モードで確認をしていますが、私が記載している書き方でクリックイベントは拾えている状態です。
    他のブラウザでも同様にイベントの取得はできています。

    キャンセル

  • 2018/06/18 14:28

    ちなみにご提示のソースは標準的なJSではないですよね?
    フレームワークや環境を追記されたほうがよいかもしれません。

    キャンセル

  • 2018/06/18 14:36

    jQueryをベースにしています。
    内容を修正しました。

    キャンセル

  • 2018/06/18 14:41

    たとえば「<f:select path="memberType" items="${memberType}" 」のところとかは
    どうやってタグを生成しているのでしょうか?

    キャンセル

  • 2018/06/18 15:07

    その部分についてはSpringFWの<form:>タグを利用しており、サーブレットを通してHTMLを生成した際に<input>や<select>のタグに変換されます。
    現状<f:XXX>となっている部分については無視していただいて結構です。
    わかりにくくてすみません。内容を再度修正いたします。

    キャンセル

check解決した方法

-1

自環境において、元々idやclassについて「XXX_addLink」といった形での記述をしていた部分のうち、「XXX_」の部分を全て削除したところ、Microsoft Edgeで問題なく動作した。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    jQueryに関する質問です。

    jQueryに関する質問です。 以前別のQ&Aサイトでも質問したのですが、回答を頂けなかったので、 こちらで質問させていただきました。 それぞれ独立したjQueryプ

  • 解決済

    jQueryによるメニュー切り替え時の不具合

    jQueryの質問になります。 JSの経験がほぼないため、具体的な修正方法を教えていただければと思います。 ウィンドウサイズが860以上の場合は横並びメニューを表示(親メニ

  • 解決済

    選択済みのラジオボタンを押すと選択が解除される

    選択済みのラジオボタンを押すと選択が解除される 上記の通りの実装を考えております。下記のソースコードのようにラジオボタンが1セットのみでしたら、下記の通りのソースコードでも問題が

  • 解決済

    ロゴをクリックしたらメニューがフェードインする仕組みを作りたいですが

    logoをクリックによってメニューが出てくる仕組みを作りたいです。 下記のよに書いてましたが、まったく出てこなかったです。 もしかしたらスクリプトが間違っていますか? コードを

  • 解決済

    リアルタイムで数が変わる要素の判別方法

    以下の連続するhogeのグループが30個あります。 <div class="hoge"> <ul> <li></li> <li></li> <li></li> </ul> </

  • 解決済

    ルーレットの作成方法について

    完全初心者です、、、 下記を満たすルーレットを作成しておりますが、上手くいかず壁にぶつかっております。 1.ルーレットの目を16個作成する 2.スタートボタンを押すとルーレット

  • 解決済

    送信ボタンクリック時、Jqueryが効かない場合がある。

    わからないこと いつもお世話になっております。 下記のコードでjqueryを記述しているのですが、送信ボタンが効かない場合があります。 条件としては、入力フォームが三つあり、そのう

  • 受付中

    フォーム送信を無効化したい

     前提・実現したいこと onclick属性のcheckOrder関数で、エラーチェックを行えば済む話なのですが、 onclick属性で呼び出してるcheckOrder関数は、htm

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

  • JavaScript

    14827questions

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

  • jQuery

    6161questions

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