jquery 如何監聽div內容的變化

我們做電子商務，javascript框架採用的是jQuery,在開發過程中遇到了上面標題列出的問題：如何監聽div內容的變化。

先給出最終代碼（後續進行相關分析）：

1 2 3 4 5

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
粗略的明白是採用自定義事件的方式去處理問題，採納代碼如下：

1 2 3 4 5 6

$('#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內容定義，採納代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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

創建自定義事件

1 2 3 4 5 6 7 8 9 10 11 12 13

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

貌似這樣的解決是完美的但是後續再繼續查看到時候，發現有更簡潔的方式，代碼如下：

1 2 3 4 5

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

除非註明，文章爲IT熱血青年原創，歡迎轉載！轉載請註明本文地址，謝謝。
本文地址：http://itblood.com/jquery-how-to-listen-div-content-change.html