jquery监控数据是否变化(修正版)

之前写的那篇中存在许多bug，今天重新整理了一下。还请各位指教

View Code

1 // /<reference path="query-1.5.1.min.js" />
2 ( function ($) {
3 /* 监控页面数据是否发生变化 */
4 var pageDataChange = false ;
5 var tagName = " Input, Select, Textarea " ;
6 var ctrlIds = [];
7 $.fn.MonitorDataChange = function (options) {
8 var deafult = {
9 arrTags: tagName, // 需监控控件的tagName属性
10 arrCtrls: ctrlIds // 不监控的控件ID
11 };
12 var ops = $.extend(deafult, options);
13 tagName = ops.arrTags;
14 ctrlIds = ops.arrCtrls;
15 /* 元素第一次获取焦点时缓存该元素数据 */
16 $(ops.arrTags).one( " focus " , function () {
17 if ($.inArray($( this ).attr( " id " ), ops.arrCtrls) != - 1 ) {
18 return ;
19 }
20 $( this ).data( ' initData ' , $( this ).val());
21 });
22 };
23 /* 获取页面数据是否已经改变 */
24 $.fn.isChange = function () {
25 $(tagName).each( function () {
26 if ($.inArray($( this ).attr( " id " ), ctrlIds) != - 1 ) {
27 return ;
28 }
29 /* 如果该元素的initData缓存数据已定义并且不等于他的value值，标识该页面中数据发生变化 */
30 if ( typeof ($( this ).data( ' initData ' )) != ' undefined ' ) {
31 if ($( this ).data( ' initData ' ) != $( this ).val()) {
32 pageDataChange = true ;
33 }
34 }
35 });
36 return pageDataChange;
37 };
38 })(jQuery);

前台调用：

View Code

1 < script type ="text/javascript" >
2 var is_change = false ;
3
4 $(document).ready( function () {
5 $( " form " ).MonitorDataChange();
6 });
7 function alertMsg() {
8 is_change = $.fn.isChange();
9 if (is_change){
10 alert( ' 数据发生改变！ ' );
11 }
12 }
13 </ script >
14 < input type ="text" />
15 < input type ="text" />
16 < input type ="text" />
17 < input type ="text" />
18 < asp:TextBox runat ="server" ></ asp:TextBox >
19 < asp:CheckBox runat ="server" />
20 < input type ="button" value ="true" onclick ="alertMsg();" />

转载于:https://www.cnblogs.com/jomhy/archive/2011/04/12/2013403.html