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();"/>
