0

カレンダーに表示されるイベント (div タグ) など、Web ページに追加された要素を検出する必要があるスクリプトを作成しています。削除された要素は気にしません。ページには、そのような要素が最大 20 ～ 30 個ある必要があります。

私のアイデア - 短くて簡単なコード - は、特定のクラス (「myName」) を使用して、既にページにある要素をブランド化することです。定期的にページをポーリングします。

// Get all divs in the calendar: 
var allDivsCount=myCalendar.querySelectorAll("div").length;
// Get already branded divs
var oldDivsCount=myCalendar.querySelectorAll("div.myName").length;
if (allDivsCount > oldDivsCount) {
    // brand the new divs and do stuff
}

これは良い習慣ですか、それとももっと良い方法はありますか? そのようなロジックが既に実装されているライブラリはありますか?

DOMNodeInserted をサポートしていないブラウザーもあり、推奨されていないため、回避しようとしています (パフォーマンスの問題により、私が読んだことから)。

4

1 に答える 1

0

あなたが反対していることは承知していますがDOMNodeInserted、とにかくオプションとして追加します (古いバージョンの IE をサポートしていない場合に備えて)。

しばらく前にこれについてブログに書きましたが、同じ解決策が今日でも適用されているようです (ただし、現在サポートしているブラウザーによっては、前述のとおりです)。

例：

$(document.body).on('DOMNodeInserted', function (e) {
    if (e.currentTarget.toString() === 'HTMLBodyElement') {
       console.log(e);
    }
});

bodyこれにより、それ自体だけでなく、内部の変更がトリガーされますbody。

$('#context').append($('<div />')); // triggers the event above

DOM変更 (たとえば AJAX 呼び出し) をインターセプトして、グローバル コールバック関数を作成できる場合は、setIntervalオプションの代わりに理想的です。

var globalCallback = function() { 
    /** Do something when the DOM changes */ 
};

/** Global AJAX event to watch for all AJAX complete within the body */
$('body').ajaxComplete(globalCallback);

もちろん、これはほんの一例です (AJAX コールバック)。

于 2013-02-15T21:05:04.630 に答える