2

onCreateJQuery セレクターに一致する、作成されるすべてのタグのイベントに相当するものを作成したいと考えています。

たとえば、結果が$("#foo > .bar > ul > li")空のセットであるドキュメントを考えてみましょう。呼び出された関数があり、タグの一致が作成さfooBarれるたびにこの関数が呼び出されるようにします。$("#foo > .bar > ul > li")

このイベントを定義したい

$(function() {});

誰かがこれの可能性を知っていますか?

4

2 に答える 2

3

最も実用的なソリューション

DOMNodeInsertedイベントにフックしてdocument変更を検出し.is、選択したセレクターと一致するかどうかを確認するために使用できます。

$(function() {
    var selector = "whatever";
    $(document).on('DOMNodeInserted', function(e) {
        if ($(e.srcElement || e.target).is(selector)) {
            alert("Matching element inserted!");
        }
    });
});​

実際に見てください。

互換性と代替品

この方法は便利ですが、次の 2 つの欠点があります。

  1. DOMNodeInsertedイベントは非推奨です。
  2. IE < 9 では動作せず、動作させることもできません。

最初に関しては、私はこれを問題とは考えていません。廃止される可能性がありますが、他に代替手段がない限り、ブラウザー ベンダーがこの機能を引き出すとは思えません。おそらく5年ほどでこれは実用的な問題になるでしょうが、コードは全部で10行ほどあるので、最新の標準で動作するように更新するのは確かに簡単です.

IE との互換性については、悲しいことに、直接何もできないというのが現実です。ただし、DOM 要素のプロトタイプを変更することによって結果を提供する、冗長で恐ろしいハックに頼ることができます。IE8 で動作するように調整された例を参照してください。

残念ながら、このアプローチには複数の問題があります。

  • DOM が変更される可能性のあるすべてのメソッド (または少なくとも、使用するすべてのメソッド) を見つけ出し、それらをソリューションに織り込む必要があります。将来的には、新しい DOM ミューテーション メソッドが追加されているかどうかを確認し、それらのサポートについていく必要があります。
  • これをターゲットにすることを選択したすべてのブラウザー (複数の場合) に対して、メソッドの正しい置換を提供するように特に注意する必要があります。
  • DOM の拡張は (一般的に)問題になる可能性があります。この特定の拡張方法が悪いと思われる場合は、IE7 がそれをサポートしていないことを考慮してください。そのブラウザーでは、DOM 内のすべての要素のメソッドを置き換えて、可能なすべての変更に確実にフックする必要があります。
  • 具体的には、現在のすべてのブラウザーをこのコードだけでターゲットにすることはできません (たとえば、Chrome ではこれらのメソッドを onNode.prototypeではなく on で定義していますElement.prototype)。たとえ冗談であっても、将来のブラウザをターゲットにすることは言及されるべきではありません。

最後に、Anthony が回答で説明しているように、ポーリングを使用して変更を検出することをいつでも決定できます。

関連リソース

于 2012-04-18T13:22:08.423 に答える
3

私の知る限り、要素が DOM に追加されたときに発生するイベントはありません。そのため、これを確認するためにハンドラをバインドできるものはありません。

できることは、DOM でセレクターに一致する要素を定期的にチェックし、現在の一致数を以前の値と比較し、それらが異なる場合に必要なアクションを実行するポーリング ルーチンをセットアップすることです。

var matchedElements = 0;

function poll() {
    var $elements = $("#foo > .bar > ul > li");
    if($elements.length > matchedElements) {
        fooBar();
    }
    matchedElements = $elements.length;
}

setInterval(poll, 500); // runs poll() every half a second

これはすべて、これらの要素の作成を制御していないか、少なくともそれらが作成されたことを確実に知ることができる方法でそれらを制御していないことを前提としています.

これらの要素の唯一のソースが作成した単一の関数である場合は、単純にそれを拡張して、jQuery でバインドされたカスタム イベントのハンドラーをトリガーすることができます。

于 2012-04-18T13:09:30.197 に答える