4

特定の要素がページに表示されたときにイベントをトリガーしたい (ソース ページを制御していない - これは Chrome 拡張機能です)

JQuery 1.7 の on() メソッドに関するドキュメントを読みました。ただし、セレクターに一致する要素が追加されたときだけでなく、セレクターで特定のイベント（クリックイベント）がトリガーされるのを待つことについてのようです。

現在メンテナンスされていない livequery プラグインで同等のもの:

$('a').livequery(function () {
  console.log('yaay a link was added');
})
4

2 に答える 2

3

これが Chrome 18+ 用に設計された Chrome 拡張機能である場合は、Mutation Observers と呼ばれる DOM4 仕様の機能を使用できます。これにより、DOM が変更されるたびに起動されるコールバックが割り当てられます。これを使用して、必要なことを行うことができます。まだかなり新しいですが、ここにもう少し情報があります

そのページのコードサンプル:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

更新: また、使いやすいかもしれないこの API に基づくライブラリにも気付きました。

于 2012-08-01T11:29:59.313 に答える
1

仕組み.livequery()_

.livequery()次の 2 つの用途があります。

  • イベントタイプを最初の引数として渡すと、
  • 第一引数にコールバック(関数)を渡すと、

.on()最初のケースでは、現在使用されているか、すでに非推奨.delegate()になっているものに完全に置き換えることができ.live()ます (jQuery のバージョンが 1.7 より古い場合)。

.livequery()2 番目のケースでは、標準の DOM 変更 JS メソッドをオーバーライドするか、それ自体をそれらに「フック」するように見えます。その動作を模倣するには、同様のことを行うか、スクリプトを再設計してその障害を回避する必要があります。

独自の実装を使用することを選択した場合は、開発者が行ったのと同じ間違いを犯さないように注意してください.live(): セレクターを jQuery 引数からモジュールの関数の引数に移動します: jQuery(selector).live(...)-> jQuery(...).on(..., selector, ...)。スクリプトを準備します (何かが変更された場合にのみ実行されます)。

DOM に追加された新しい要素をリッスンする

DOM に挿入される新しい DOM 要素をリッスンするイベントが広く採用されていないため、運が悪いです。使用できるイベントのリストは次のとおりです。

https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/DOM_Events

于 2012-08-01T11:30:07.297 に答える