【jQuery】動的に生成した要素を変数として扱いたい

Question

初歩的なご質問で申し訳ないです。

動的に生成した要素に対してvarで変数宣言をして扱いたいのですが、
どのようにすればよいのでしょうか。第二引数にセレクタを記述するやり方はできたのですが、
クリックなどのイベントではなくページを読み込んだときに処理を実行する方法が知りたいです。

$(document).on("click", "#hoge", function(){
	//処理
	var xxx = $("#hoge");
	xxx.addClass("foo");
});

（#hogeは動的に生成された要素です。）

よろしくお願いいたします。

Answer 1

MutationObserver

動的に追加されたノードを捕捉するには MutationObserver を使用します。

• MutationObserver - Web API インターフェイス | MDN

DOMNodeInserted

DOMNodeInserted は DOM Level 3 Events では非推奨なイベントとして存在しましたが、後継仕様の UI Events で廃止され、DOM Standard で MutationObserver に置き換えられました。

• DOMNodeInserted - Document Object Model (DOM) Level 3 Events Specification
• UI Events （日本語訳）
• 3.3.1. Interface MutationObserver - DOM Standard

Re: obon_t さん

Comments

[obon_t]

ありがとうございます！
MutationObserverを使ってみることにしました。

PS.無事動作いたしました。

[sakapun]

個人が使うプロダクトならば問題ありませんが、最新の仕様を使うと旧ブラウザでは動かない可能性があることを認識した上でお使いください。
例えばこの機能はIEは11以降ではないと動作しません。

[think49]

補足ありがとうございます。
IE10- がMSサポート対象外になったので触れてませんでしたが、仕事ではまだ必要になることがあるかも知れませんね…
http://caniuse.com/#feat=mutationobserver。

Answer 2

DOMNodeInserted を使って下さい。以下のコードは body 配下にクラス属性が myClass というノードが追加された場合に発火するイベントです。

$('body').on('DOMNodeInserted', '.myClass', function(e) {
  console.log(e.target);
});

Comments

[obon_t]

おお！理想となる動作になりました。
ありがとうございます。

ただ、DOMNodeInsertedはまだ使っても大丈夫なのでしょうか....

[mattn]

非推奨なので使わない方がよさそうですね

Answer 3

globalに変数を用意して、そこに入れるんじゃだめなのでしょうか？
他の関数からはグローバルが定義されているか、確認してから使えばよろしいかと。

var gElement = null;

$(function() {
    $('#fuga').on("click", function(){
        if (!gElement) {
            var ele = $("<div>");
            ele.addClass("foo");
            $('body').append(ele);
            gElement = ele;
        }
    });
    $('#hoge').on("click", function(){
        if (gElement) {
            gElement.css('background-color','#FF0000');
        }
    });
});
```みたいな感じでしょうか？

Comments

[obon_t]

ありがとうございます！
グローバル変数ですか...その方法を考えていなかったです。試してみます！

Answer 4

おそらくやりたいことは下記のコードで実現できるのではと思います。

$(function(){
    var xxx = $("#hoge");
    xxx.addClass("foo");
})

色々な書き方があるのですが、上の書き方が一番コード量が少なくなるのでお薦めです。
http://qiita.com/8845musign/items/88a8c693c84ba63cea1d

ちなみにJavascriptやjQueryが出てきている場面で「動的に追加される要素」という語句をこのような場面で使うと、意図が伝わらない事がありますのでお気をつけください。
動的に追加される要素とは、ページを読み込み終わった後にさらに$.append()などで追加される要素を指すことが多いためです。
ページを読み込み終わる直後に操作できるものは「動的に追加される要素」とは呼ばないので一応注意してみてください

Comments

[obon_t]

説明が下手でごめんなさい。

動的な要素と書かせていただいたのは append()で追加した要素に対するものです。
その追加した要素(#hoge)を変数として扱いたいです。

[sakapun]

追加した要素について、画面を再読込したときに何か反映したいということなのでしょうか？
（ちなみにそれは不可能なのですが）

それとも追加された瞬間に何かその要素に対して処理を行いたいという意味なのでしょうか？

[obon_t]

まさに後者の意味です。

[obon_t]

動的に生成した要素に対して他の関数からその要素を弄りたいのですが、エラーが出てしまうため悩んでました。それで行き着いたのが上の書き方でしたが、クリックなど必要ないです....。