web-dev-qa-db-ja.com

domElementの変更のjQueryウォッチ？

フッターdivにhtmlマークアップを挿入するajaxコールバックがあります。

私が理解できないのは、内容が変化したときにdivを監視する方法を作成する方法です。私が作成しようとしているレイアウトロジックをコールバックに配置することは、各メソッド（コールバックとレイアウトdivハンドラー）が他のことを知らないため、オプションではありません。

理想的には、$('#myDiv').ContentsChanged(function() {...})または$('#myDiv').TriggerWhenContentExists( function() {...})に類似した何らかのイベントハンドラが見たいです。

Watchというプラグインとそのプラグインの改良版を見つけましたが、どちらもトリガーできませんでした。私が考えることができるすべてを「見て」みました（つまり、ajaxインジェクションを介してdivのheightプロパティが変更されました）が、何もすることができませんでした。

何か考え/助け？

javascriptjqueryjquery-pluginsjquery-events
34
jas

私が見つけた最も効果的な方法は、DOMSubtreeModifiedイベントにバインドすることです。 jQueryの$.html()と標準JavaScriptのinnerHTMLプロパティの両方でうまく機能します。

_$('#content').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});
_

http://jsfiddle.net/hnCxK/

JQueryの$.html()から呼び出されたときに、イベントが2回発生することがわかりました。1回は既存のコンテンツをクリアし、1回は設定します。簡単な実装では、簡単な_.length_-- checkが機能します。

HTML文字列（_'<p>Hello, world</p>'_）に設定されている場合、イベントは常に発生することに注意することも重要です。また、プレーンテキスト文字列の場合、イベントは変更されたときにのみ発生します。

43
Courtney Christensen

DOM要素の変更をリッスンできます（たとえばdiv）にバインドすることで DOMCharacterDataModified chromeでテストされていますが、IEでは動作しません demo here
ボタンをクリックすると、監視されているdivが変更され、その結果、別のdivが埋められてその動作が表示されます...

もう少し見て Shikijqueryはdivとそれに応じて行動しますそれはあなたが望むことをする必要があるように見えます：

$('#idOfDiv').bind('contentchanged', function() {
    // do something after the div content has changed
    alert('woo');
});

Divを更新する関数で：

$('#idOfDiv').trigger('contentchanged');

これを 実際のデモとして参照してください

7
Scoobler

GoogleによるMutation-summaryというきちんとしたjavascriptライブラリがあり、domの変更を簡潔に観察できます。それについての素晴らしいことは、あなたが望むなら、あなたがプロジェクトのホームページで非常に有益なビデオを見るべきだと私が意味することを理解するために、実際にDOMに違いをもたらしたアクションのみを知らされることができるということです。

リンク： http://code.google.com/p/mutation-summary/

jqueryラッパー： https://github.com/joelpurra/jquery-mutation-summary

4
Ricardo Freitas

Firefox/Opera/SafariのDOMNodeInsertedイベントとIEのonpropertychangeイベントを調べてください。これらのイベントを利用するのはおそらくそれほど難しくないでしょうが、少しハックっぽいかもしれません。 JavaScriptイベントのドキュメントを次に示します。 http://help.dottoro.com/larrqqck.php

3
rynlbrwn