我們做電子商務，javascript框架采用的是jQuery,在開發過程中遇到了上面標題列出的問題：如何監聽div內容的變化。
先給出最終代碼（后續進行相關分析）：
var title = $("b.facility");
var title = $('#title');//the element I want to monitor
title.bind('DOMNodeInserted', function(e) {
alert('element now contains: ' + $(e.target).html());
});
解決問題的思路如下：
我們先回顧一下jQuery事件中的change()方法定義和用法：
當元素的值發生改變時，會發生 change 事件。
該事件僅適用于文本域（text field），以及 textarea 和 select 元素。
change() 函數觸發 change 事件，或規定當發生 change 事件時運行的函數。
注釋：當用于 select 元素時，change 事件會在選擇某個選項時發生。當用于 text field 或 text area 時，該事件會在元素失去焦點時發生。
但是問題出現了關于div內容的改變change方法中只字不提，我們如何處理那？
后續百度關鍵詞： jquery div 內容發生變化：無果；
繼續，bing關鍵詞：jquery how to listen div change 找到一篇相關文檔http://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly
粗略的明白是采用自定義事件的方式去處理問題，采納代碼如下：
$('#laneconfigdisplay').bind('contentchanged', function() {
// do something after the div content has changed
alert('woo');
});
// 這樣會調用上面的函數
$('#laneconfigdisplay').trigger('contentchanged');
但是contentchanged是什么內容沒有說明，繼續追溯
bing關鍵詞：jquery how to listen div change 找到一篇相關文檔
繼續，bing關鍵詞：jquery contentchanged 找到一篇相關文檔http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed
這篇文章詳細說明了contentchanged內容定義，采納代碼如下：
jQuery.fn.watch = function( id, fn ) {
returnthis.each(function(){
var self = this;
var oldVal = self[id];
$(self).data(
'watch_timer',
setInterval(function(){
if(self[id] !== oldVal) {
fn.call(self, id, oldVal, self[id]);
oldVal = self[id];
}
},100)
);
});
returnself;
};
jQuery.fn.unwatch = function( id ) {
returnthis.each(function(){
clearInterval( $(this).data('watch_timer') );
});
};
創建自定義事件
jQuery.fn.valuechange = function(fn) {
returnthis.bind('valuechange', fn);
};
jQuery.event.special.valuechange = {
setup: function() {
jQuery(this).watch('value', function(){
jQuery.event.handle.call(this, {type:'valuechange'});
});
},
teardown: function() {
jQuery(this).unwatch('value');
}
};
貌似這樣的解決是完美的但是后續再繼續查看到時候，發現有更簡潔的方式，代碼如下：
var title = $("b.facility");
var title = $('#title');//the element I want to monitor
title.bind('DOMNodeInserted', function(e) {
alert('element now contains: ' + $(e.target).html());
});
感覺這應該是我需要代碼，do it ！fine
