快捷導(dǎo)航

jquery監(jiān)聽div內(nèi)容的變化具體實(shí)現(xiàn)思路

更新時(shí)間：2013年11月04日 15:42:57 作者：

在開發(fā)過程中遇到了上面標(biāo)題列出的問題：如何監(jiān)聽div內(nèi)容的變化，下面是具體的解決思路，感興趣的朋友可以參考下

我們做電子商務(wù)，javascript框架采用的是jQuery,在開發(fā)過程中遇到了上面標(biāo)題列出的問題：如何監(jiān)聽div內(nèi)容的變化。
先給出最終代碼（后續(xù)進(jìn)行相關(guān)分析）：

復(fù)制代碼代碼如下:

 
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()方法定義和用法：
當(dāng)元素的值發(fā)生改變時(shí)，會(huì)發(fā)生 change 事件。
該事件僅適用于文本域（text field），以及 textarea 和 select 元素。
change() 函數(shù)觸發(fā) change 事件，或規(guī)定當(dāng)發(fā)生 change 事件時(shí)運(yùn)行的函數(shù)。
注釋：當(dāng)用于 select 元素時(shí)，change 事件會(huì)在選擇某個(gè)選項(xiàng)時(shí)發(fā)生。當(dāng)用于 text field 或 text area 時(shí)，該事件會(huì)在元素失去焦點(diǎn)時(shí)發(fā)生。
但是問題出現(xiàn)了關(guān)于div內(nèi)容的改變change方法中只字不提，我們?nèi)绾翁幚砟牵?
后續(xù)百度關(guān)鍵詞： jquery div 內(nèi)容發(fā)生變化：無(wú)果；
繼續(xù)，bing關(guān)鍵詞：jquery how to listen div change 找到一篇相關(guān)文檔http://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly
粗略的明白是采用自定義事件的方式去處理問題，采納代碼如下：

復(fù)制代碼代碼如下:

 
$('#laneconfigdisplay').bind('contentchanged', function() { 
// do something after the div content has changed 
alert('woo'); 
}); 
// 這樣會(huì)調(diào)用上面的函數(shù) 
$('#laneconfigdisplay').trigger('contentchanged'); 

但是contentchanged是什么內(nèi)容沒有說明，繼續(xù)追溯
bing關(guān)鍵詞：jquery how to listen div change 找到一篇相關(guān)文檔
繼續(xù)，bing關(guān)鍵詞：jquery contentchanged 找到一篇相關(guān)文檔http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed
這篇文章詳細(xì)說明了contentchanged內(nèi)容定義，采納代碼如下：

復(fù)制代碼代碼如下:

 
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') ); 
}); 
}; 

創(chuàng)建自定義事件

復(fù)制代碼代碼如下:

 
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'); 
} 
}; 

貌似這樣的解決是完美的但是后續(xù)再繼續(xù)查看到時(shí)候，發(fā)現(xiàn)有更簡(jiǎn)潔的方式，代碼如下：

復(fù)制代碼代碼如下:

 
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()); 
}); 

感覺這應(yīng)該是我需要代碼，do it ！fine

您可能感興趣的文章: