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

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

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

    サムネイル、つまり動画リストの要素をまずは見つけます。
    vod-mod-tray__content, 或いは vod-mod-series-area__tray っていう class 以下にいるようでした。(これは js で動的に追加されている)
    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
  • 新しい記事へ
    Mac で __MACOSX や .DS_Store を含めずに ZIP 圧縮する方法

    古い記事へ
    OCN モバイル ONE であとから音声 SIM を追加して容量シェアする方法

profile picture

自己紹介的な何か

@wkmettyでついったーやってます。時々。 6年間勤めたゲーム会社を2018年2月に退職しフリーランスのプログラマに。 WordPress Core, WP-CLI コントリビューター。 お仕事募集中です。