jQuery で動的に後から追加された要素を検知して何かをする
2017-06-13 09:00
  • なにかの要素が追加されたのをトリガーにして処理をしたいときに、 jQuery の on を使えば便利です。
    hulu の Chrome 拡張を作ったときに on を使って要素を監視したので、少しだけまとめます。

    マウスオーバーでサムネイルをポップアップさせない

    僕の場合、↑の記事でも紹介していますが、
    hulu はサムネイルにマウスを乗せると、詳細がポップアップで表示されます。
    これが大変なストレスになったので、いっその事なくしてしまおう、という機能ですね。笑

    サムネイル、つまり動画リストの要素をまずは見つけます。
    動画のリスト自体は、 `vod-mod-tray__content`, 或いは `vod-mod-series-area__tray` っていう class 以下にいるようでした。(これは js で動的に追加されている)

    また、どうやら hulu は、ホバー時に各サムネイルの要素以下に入っている `article` タグを `div` に変更して
    ポップアップ要素を表示しているようでした。

    <div class="vod-mod-tray__content">
    ...
    ...
        <div class="vod-mod-tray__item vod-utl-panel-opener">
            <a><img src=""></a>  <!-- ここにサムネイル画像 -->
            <article>....ここにポップアップ時に表示するHTML</article>
        </div>
    </div>
    

    こんな感じなので、以下のように要素を監視しました。

    $(".vod-mod-series-area__tray, .vod-mod-tray__content").on('mouseover', "[class^='vod-mod-tray__']", function(e) {
        return false;
    });
    

    これで、 JavaScript で後から要素が追加されても継続して監視されるようになります。
    つまりスクロールして次のリストが表示されようが、「シーズン」を切り替えようが、マウスオーバーしても
    なにもしないようになります。( return false; )してますので。。

    失敗編

    $('xxx').on() を使っているのにあとから追加された要素を監視できないケースが有りました。

    $("[class^='vod-mod-tray__']").on('mouseover', function(e) {
        return false;
    });
    

    このケースですね。これは、 `vod-mod-tray__` クラスが設定されている要素に対して、マウスオーバーを監視していますが、
    これだと対象の要素を直に指定してしまっていますので、うまく動きません。
    `on` は $('selector') で指定された子要素を監視するようです。

    なので最初に紹介したように、イベントを登録する要素を対象の要素の親にしてあげればいいです。
    地味にハマりましたが、無事に解決しました…!

    参考サイト様

    jQueryで後から追加した要素にイベントを貼る


    人気ブログランキングへ ブログランキング・にほんブログ村へ
    ↑応援よろしくお願いします!m(_ _)m

  • 2017-06-13 09:00
  • WEBフロントエンド
  • JavaScriptイベントハンドラ要素監視hulujQueryonmouseover
profile picture

自己紹介的な何か

@wkmettyでついったーやってます。時々。 普段はなんちゃってプログラマやってます。海外から帰任してからは現場に戻って最前線でコード書いてます。 週末は気の向くままにプログラミングしたり、写真撮りに出かけたり、家でhuluみながらまったりしたりしています。(*´ω`*)モキュ