web-dev-qa-db-ja.com

動的要素のロード時のjQuery

ページ上のコンテナに動的に追加される要素を条件付きで操作しようとしていますが、イベントがありません。

コンテナがあるとしましょう：

<div id="container"></div>

すべての新しい要素のクリック関数にイベントハンドラーを簡単にバインドできます。

$('#container').on('click', '.sub-element', function() { ... });

しかし、要素が#containerに追加されたときに「ワンタイム」フックを取得するために、何にバインドしますか。私はreadyとloadにバインドしようとしましたが、役に立ちませんでした。これを行う方法はありますか、または問題の別の解決策を考え出す必要がありますか？

このフィドルには私の動作しない例が含まれています 。

jqueryjquery-1.7
35
Klaus Byskov Pedersen

JQueryイベントハンドラーによって取得できる、新しく追加されたDOM要素でカスタムイベントをトリガーできます。

//bind to our custom event for the `.sub-element` elements
$('#container').on('custom-update', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
});

//append a new element to the container,
//then select it, based on the knowledge that it is the last child of the container element,
//and then trigger our custom event on the element
$('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update');

デモは次のとおりです。 http://jsfiddle.net/ggHh7/4/

この方法を使用すると、異なる方法で動的コンテンツをロードする場合でも、グローバルに何かを行うことができます。

更新

ブラウザのサポートについてはわかりません（IE8以前ではサポートされていないと思います）が、DOMNodeInsertedミューテーションイベントを使用して、DOM要素が追加されたことを検出できます。

$('#container').on('DOMNodeInserted', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
})

$('#container').append('<div class="sub-element">No worky!</div>');

以下にデモを示します。 http://jsfiddle.net/ggHh7/7/

更新

現時点ではDOMNodeInsertedが減価償却されているため、このための新しいAPIがあります。まだ調べていませんが、MutationOvserverと呼ばれています： https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

36
Jasper