javascript - jQueryでDOM要素を選択-動的に追加

Question

jQueryでは、、、およびを使用.live()し.on()て.delegate()、ページにまだ追加されていないDOM要素にイベントをバインドできます。

同様の手法を使用して、まだ追加されていないDOM要素を選択して、一部の機能を適用することは可能ですか？

たとえば、クラス.reqを持ち、「必須」と呼ばれる透かしを含むすべての入力要素を選択したいと思います。

透かしを作成するためにすでにjqueryプラグインを使用していますが、ページに動的に追加されたDOM要素を処理できません。

Answer 1

ミューテーションイベント（ ）を使用できますDOMNodeInsertedが、非推奨です。
したがって、それらを使用したり、X回ごとにDOMをプルしたりしない限り、答えはNOです。

引っ張る方法：

setInterval(function(){
    // Do what you want here.
    $('.req').watermark("Required");
}, 500); // evey half a second.

Answer 2

残念だけど違う。イベントの委任は、すでに存在するDOMノードに技術的にバインドしているためにのみ機能します。したがって、最終的にイベントをトリガーする要素がまだ存在していなくてもかまいません。途中でDOMレベル2のイベントがあり（一部のブラウザーではすでに実装されています）、作成中の新しいDOMノードまたは操作中の既存のDOMノードに対応できますが、ブラウザーのサポートが改善されるまで、実際にはオプションはありません。 DOMを繰り返しポーリングして新しいノードを探す以外は、ひどく非効率的です。

Answer 3

The answer is, it depends on how you are inserting elements into the DOM. If you are inserting them via jQuery then you could use a plugin such as livequery. As you can see, it hooks up to the core manipulation methods and anytime they are called it runs the callbacks registered on a live query. If you are inserting the elements via vanilla JS then as others have stated, the DOM muatation events are deprecated and unreliable hence polling would be your best option.

Answer 4

この投稿が古いことは知っていますが、これはjQueryのfindメソッドを使用して実行できると思います。

http://jsfiddle.net/vreTG/1/

// Generate some dynamic content
var dyn = '<ul>';
dyn += '<li class="req">Name</li>';
dyn += '<li class="req">Address</li>';
dyn += '<li class="opt">Phone Number</li>';
dyn += '<ul>';

// Add to DOM
$("#container").html(dyn);

// Find required fields
$("#container").find(".req")
    .prepend("* ")
    .css("color", "#900");