jQuery：列挙型/セレクタを観察

Question

$("#myTable tr").live("click", someCallback);を使用します（現在は非推奨です）。新しく追加されたテーブル行のクリックイベントを購読するのはかなり簡単です。新しく追加されたテーブル行に挨拶=「世界」属性を追加します

$("myTable tr").live().attr("hello", "world"); 

：

は私だけではなく支援イベントを行いますが、任意のjQueryは、のようなものを指令する方法に興味があると思います。 jQueryにそのようなことはありますか？

更新：にご注意ください。私はに、要素が追加された場合にを購読したいと思う。私はではなく、はそれを追加するコードを制御します。 DataTablesを例に取ると、dataTablesプラグインがテーブル行を作成します。

Answer 1

これは本当に存在しない理由は2つあります。

1. DOM変更イベントは広くサポートされていません。 ChromeとFFではDOMSubtreeModifiedを聞くことができますが、IEとOperaでは聞こえません。
2. すべてのDOMイベントをセレクタに対してチェックするのは非常にコストがかかります。 .live/.delegateは、既にかなり戦略的に非効率的です。

図2を手助けするために、1は問題ではないと想像して、要素がDOMに追加されるたびにキャプチャできます。この場合、新しい要素とその子要素を"#myTable tr"に対して評価する必要があります。これにより、で実行される非ネイティブコードの量が大幅に増加し、範囲内で DOMが変更されるたびに実際に処理が遅くなります。

最善の戦略は、あなたがとのみChromeとFFをサポートする必要が選択肢がない場合は<tr>

UPDATEを挿入することになるコードにご希望のjQueryの変更を加えることで、一つの解決策があります私は考えることができます。もちろん、それは速くなりません、あなたは、特異を通して、あなたのパフォーマンスを向上させることができます

$.fn.elementInserted = function(pattern, fn) { 
    return this.bind('DOMNodeInserted', function(event) { 
      if (event.target.nodeType != 1) return; 
      $(event.target).filter(pattern).each(fn); 
    }); 
}; 

/* SLOW */ $(document).elementInserted('#myTable tr', function(){$(this).attr('hello', 'world');}); 
/* FASTER */ $('#myTable').elementInserted('tr', function(){$(this).attr('hello', 'world');}); 

は、ここで例を参照してください：http://jsfiddle.net/vCZHQ/

表は、タイムアウトをすることによってIEに変更された場合は、理論的にチェックすることができます：

var oldEls = $('#myTable tr'); 
setInterval(function() { 
    var newEls = $('#myTable tr'); 
    if(oldEls.length < newEls.length) { 
     /* Do code here to figure out who is new and apply changes. */ 
    } 
    oldEls = newEls; 
}, 50); 

これは、これにはわずかな遅延があり、実際にはノートパソコンのバッテリが消費されると述べています。

Answer 2

私は、実際にテーブルに行を追加するステートメントのコールバック関数または何かの行にhello属性を追加するコードを追加する必要があると思います。