web-dev-qa-db-ja.com

動的に追加された要素のJQueryセレクター

ページのロード後にDOMに動的に挿入される要素（ハンドラーのバインドではない）を選択するようにJQueryを調整する方法がわかりません。

例えば：

HTMLがある場合：

<div id="bar">
 World!
</div>

次に、新しい要素を作成してDOMに挿入します。

var foo = '<div id="foo">Hello</div>';
$("#bar").before(foo);

私はこれで終わります：

<div id="foo">Hello</div>
<div id="bar">
 World!
</div>

後で、JQueryを使用して新しい要素を操作し、挿入した要素で何か別のことをしたい場合があります。しかし、私がしようとすると：

myHappyEl = $("#foo");

その後、myHappyElは未定義になります。おそらくDOMがロードされた後に添付されるため、JQueryはそれを認識しません。

関連する可能性のある微妙に異なる問題に対処する多くの提案を見てきました。解決策は、.live（）/。on（）を使用して、要素が存在するときにイベントリスナーをアタッチすることです。クリックイベントまたは何かをキャプチャしたい場合、それは素晴らしいでしょうが、私はしません。動的に追加された要素を選択できるようにしたい。

jqueryselector
23
Gustavo

次のように、要素が挿入された後にその変数を割り当てる必要があります。

var myHappyEl = $("#foo"); //Nothing, it isnt there
var foo = '<div id="foo">Hello</div>';
$("#bar").before($(foo));
myHappyEl = $("#foo");

それ以外の場合、要素はページに存在しません。

4
tymeJV