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

Question

转：jomhy

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

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

View Code

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

复制代码前台调用：

View Code

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

复制代码