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 ) {
return
this
.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
)
);
});
return
self;
};
jQuery.fn.unwatch = function( id ) {
return
this
.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) {
return
this
.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