change() 関数は機能し、フォーム要素の変更を検出しますが、DOM要素のコンテンツが変更されたことを検出する方法はありますか？
これ#contentは、フォーム要素でない限り機能しません
$("#content").change( function(){
// do something
});私はこれを次のようなときにトリガーします：
$("#content").html('something');またhtml()、append()関数にはコールバックがありません。
助言がありますか？
回答:
これらは突然変異イベントです。
私はjQueryでミューテーションイベントAPIを使用していませんが、大まかな検索でGitHubのこのプロジェクトに移動しました。私はプロジェクトの成熟度を知りません。
私はこの投稿が1年前であることを知っていますが、同様の問題を抱えている人々に別の解決策を提供したいと思います。
jQuery changeイベントは、ユーザー入力フィールドでのみ使用されます。何か他のものが操作される場合（divなど）、その操作はコードから行われるためです。したがって、操作が発生する場所を見つけ、そこに必要なものを追加します。
しかし、それが何らかの理由でできない場合（複雑なプラグインを使用しているか、「コールバック」の可能性が見つからない場合）、私が提案するjQueryアプローチは次のとおりです。
a。単純なDOM操作の場合は、jQueryチェーンとトラバースを使用します。$("#content").html('something').end().find(whatever)....
b。他に何かしたい場合は、jQueryのbindカスタムイベントを使用し、triggerHandler
$("#content").html('something').triggerHandler('customAction');
$('#content').unbind().bind('customAction', function(event, data) {
//Custom-action
});jQueryトリガーハンドラーへのリンクは次のとおりです。http：//api.jquery.com/triggerHandler/
bindがハンドラーがを返すことを期待していることboolです。
ブラウザは<div>要素のonchangeイベントを発生させません。
これの背後にある理由は、JavaScriptで変更しない限り、これらの要素は変更されないためだと思います。要素を（ユーザーが実行するのではなく）自分で変更する必要がある場合は、次のように、要素を変更すると同時に適切な付随するコードを呼び出すだけです。
$("#content").html('something').each(function() { });次のようなイベントを手動で起動することもできます。
$("#content").html('something').change();これらの解決策のどちらもあなたの状況でうまくいかない場合は、具体的に達成しようとしていることについて、詳細を教えていただけませんか？
http://jsbin.com/esepal/2はどうですか
$(document).bind("DOMSubtreeModified",function(){
console.log($('body').width() + ' x '+$('body').height());
})このイベントは、Mutation Observer APIを支持して廃止されました
DOMSubtreeModifiedテストもDOMの一部にすぎないので、seeignイベントにバインドしてみてください。
SOのこちらの投稿を参照してください。
これを試してみてください、それはジェームズ・パドルシー（JP on SO）によって作成され、あなたが望むものを正確に行います（私は思う）
http://james.padolsey.com/javascript/monitoring-dom-properties/
これは厳密にはjQueryの回答ではありませんが、デバッグについて言及するのに役立ちます。
Firebugでは、DOMツリーの要素を右クリックして、「属性の変更時にブレーク」を設定できます。
スクリプトで属性が変更されると、デバッグウィンドウが表示され、何が起こっているのかを追跡できます。要素の挿入と要素の削除のオプションも以下にあります（スクリーングラブのポップアップではわかりにくいです）。
私はmutabor（https://github.com/eskat0n/mutabor）と呼ばれる小さなJSライブラリを開発しています。これは、DOM変異イベントの使用を簡略化することを目的としています。例については、demo.htmlを参照してください。
livequeryプラグインをお試しください。それは私がやっているのと同じようなことでうまくいくようです。
多くの場合、これを実現する簡単で効果的な方法は、DOMを変更しているときと場所を追跡することです。
これを行うには、常にDOMの変更を担当する1つの中心的な関数を作成します。次に、この関数内から変更された要素に必要なクリーンアップを実行します。
最近のアプリケーションでは、すぐにアクションを実行する必要がなかったので、handly load（）関数のコールバックを使用して、変更された要素にクラスを追加し、setIntervalタイマーで数秒ごとにすべての変更された要素を更新しました。
$($location).load("my URL", "", $location.addClass("dommodified"));その後、あなたはそれを好きなように扱うことができます-例えば
setInterval("handlemodifiedstuff();", 3000);
function handlemodifiedstuff()
{
$(".dommodified").each(function(){/* Do stuff with $(this) */});
}html（または任意の）関数にコールバックオプションを追加できます。
$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
fn = fn || function(){};
var result = this.oldHtml(html);
fn();
return result;
};
$('body').html(11,function(){alert("haha");});何かの要素を変更するのではなく、キャッチする必要がある要素によって要素を強制的に変更するのではありません。
イベントの要素の変更をチェックするスニペットを書きました。
したがって、サードパーティのJavaScriptコードなどを使用していて、何かが表示されたときやクリックしたときに変更されたときを知る必要がある場合は、そうすることができます。
以下のスニペットでは、ボタンをクリックした後にテーブルのコンテンツがいつ変更されるかを知る必要があるとしましょう。
$('.button').live('click', function() {
var tableHtml = $('#table > tbody').html();
var timeout = window.setInterval(function(){
if (tableHtml != $('#table > tbody').
console.log('no change');
} else {
console.log('table changed!');
clearInterval(timeout);
}
}, 10);
});疑似コード：
これを達成するには、Mutation Eventsを使用します。www.w3.orgによると、ミューテーションイベントモジュールは、attrやテキストの変更を含む、ドキュメントの構造の変更を通知できるように設計されています。詳細については、MUTATION EVENTS
例えば ：
$("body").on('DOMSubtreeModified', "#content", function() {
alert('Content Modified'); // do something
});不可能です。つまり、コンテンツ変更イベントがあると思いますが、Xブラウザではありません。
バックグラウンドで厄介な間隔がぎゅうぎゅうと鳴り響くまで、私は不可能だと言えますか？