首頁 > web前端 > js教程 > 主體

jquery監聽div內容的變化具體實現思路_jquery

WBOY
發布: 2016-05-16 17:17:37
原創
1757 人瀏覽過

我們做電子商務,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',
$(self).data(
'watch_timer',
$(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
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板