jquery监听div内容的变化具体实现思路
我们做电⼦商务，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 到⼀篇相关⽂档stackoverflow/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly
粗略的明⽩是采⽤⾃定义事件的⽅式去处理问题，采纳代码如下：
复制代码代码如下:jquery修改html内容
$('#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 到⼀篇相关⽂档stackoverflow/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