37

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

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

$('#myDiv').ContentsChanged(function() {...})理想的には、またはに似たある種のイベントハンドラーを見たいと思います$('#myDiv').TriggerWhenContentExists( function() {...})

watch と呼ばれるプラグインとそのプラグインの改良版を見つけましたが、どちらもトリガーすることはできませんでした。考えられるすべてを「監視」しようとしましたが（つまり、div の高さプロパティが ajax インジェクションによって変更されました）、まったく何もできませんでした。

何か考え/助けはありますか？

4

5 に答える 5

51

私が見つけた最も効果的な方法は、DOMSubtreeModifiedイベントにバインドすることです。$.html()これは、jQueryと標準の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チェックは、単純な実装で機能します。

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

于 2012-03-23T19:42:28.993 に答える
7

ChromeでテストされたDOMCharacterDataModifiedにバインドすることで、DOM要素（たとえばdiv）の変更をリッスンできますが、IEでは機能しません。ここでデモを参照してください。別のdivを出して、その動作を示します...

もう少し見てみると、 jqueryに対するShikiの答えは、div内の変更をリッスンし、それに応じて動作するように見えます。

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

divを更新する関数では：

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

ここで実用的なデモとしてこれを参照してください

于 2011-03-28T14:02:15.703 に答える
5

dom の変更を簡潔に観察できる、すてきな JavaScript ライブラリ、mutation-summary by google があります。これの素晴らしい点は、必要に応じて、実際に DOM に違いをもたらしたアクションのみを通知できることです。プロジェクトのホームページにある非常に有益なビデオを参照してください。

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

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

于 2012-08-14T11:34:29.330 に答える
3

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

于 2009-12-25T11:20:36.590 に答える