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

 更新时间:2011年04月12日 13:56:05   作者:  
jquery监控数据是否变化(修正版) 之前写的那篇中存在许多bug,今天重新整理了一下。还请各位指教
复制代码 代码如下:

///<reference path="query-1.5.1.min.js" />
(function($) {
/*监控页面数据是否发生变化*/
var pageDataChange = false;
var tagName = "Input, Select, Textarea";
var ctrlIds = [];
$.fn.MonitorDataChange = function(options) {
var deafult = {
arrTags: tagName, //需监控控件的tagName属性
arrCtrls: ctrlIds //不监控的控件ID
};
var ops = $.extend(deafult, options);
tagName = ops.arrTags;
ctrlIds = ops.arrCtrls;
/*元素第一次获取焦点时缓存该元素数据*/
$(ops.arrTags).one("focus", function() {
if ($.inArray($(this).attr("id"), ops.arrCtrls) != -1) {
return;
}
$(this).data('initData', $(this).val());
});
};
/*获取页面数据是否已经改变*/
$.fn.isChange = function() {
$(tagName).each(function() {
if ($.inArray($(this).attr("id"), ctrlIds) != -1) {
return;
}
/*如果该元素的initData缓存数据已定义并且不等于他的value值,标识该页面中数据发生变化*/
if (typeof ($(this).data('initData')) != 'undefined') {
if ($(this).data('initData') != $(this).val()) {
pageDataChange = true;
}
}
});
return pageDataChange;
};
})(jQuery);

前台调用:
复制代码 代码如下:

<script type="text/javascript">
var is_change = false;
$(document).ready(function() {
$("form").MonitorDataChange();
});
function alertMsg() {
is_change = $.fn.isChange();
if(is_change){
alert('数据发生改变!');
}
}
</script>
<input type="text"/>
<input type="text" />
<input type="text" />
<input type="text" />
<asp:TextBox runat="server"></asp:TextBox>
<asp:CheckBox runat="server" />
<input type="button" value="true" onclick="alertMsg();"/>

相关文章

  • jquery实现鼠标拖动图片效果示例代码

    jquery实现鼠标拖动图片效果示例代码

    鼠标拖动图片的效果想必大家都有见到过吧,其实实现起来很简单的,下面使用query来实现下,感兴趣的朋友不要错过
    2014-01-01
  • ligerUI的ligerDialog关闭刷新的方法

    ligerUI的ligerDialog关闭刷新的方法

    今天小编就为大家分享一篇ligerUI的ligerDialog关闭刷新的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中

    基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中

    这篇文章主要介绍了基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中的方法,需要的朋友可以参考下
    2014-05-05
  • 分享jQuery的3种常见事件监听方式

    分享jQuery的3种常见事件监听方式

    这篇文章主要介绍了jQuery常见事件的监听方式,页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句。这就需要对事件进行监听,下面关于监听事件的介绍,需要的小伙伴可以参考一下
    2022-03-03
  • 基于jquery的文字向上跑动类似跑马灯的效果

    基于jquery的文字向上跑动类似跑马灯的效果

    这是一个基于jquery的文字向上跑动,其效果类似跑马灯,在某些情况下还是比较实用的,下面与大家分享下实现代码
    2014-09-09
  • 从JavaScript 到 JQuery (1)学习小结

    从JavaScript 到 JQuery (1)学习小结

    本人使用JavaScript 已经有2年左右的时间了,一直被它简洁优雅的代码所吸引, 近期接触了 JQuery这个库 , 感觉还不错, 但是并不意味着要舍弃 JavaScript , 而是更宣扬结合使用 .
    2009-02-02
  • jQuery检查事件是否触发的方法

    jQuery检查事件是否触发的方法

    这篇文章主要介绍了jQuery检查事件是否触发的方法,涉及jQuery中trigger方法的使用技巧,需要的朋友可以参考下
    2015-06-06
  • jquery 禁止鼠标右键并监听右键事件

    jquery 禁止鼠标右键并监听右键事件

    本篇文章主要介绍了jquery禁止鼠标右键并监听右键事件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • jQuery实现上下滚动公告栏详细代码

    jQuery实现上下滚动公告栏详细代码

    之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,给用户带来极好的用户体验,下面小编通过实例代码给大家分享基于jQuery实现上下滚动公告栏,感兴趣的朋友一起看看吧
    2018-11-11
  • jQuery实现右键菜单、遮罩等效果代码

    jQuery实现右键菜单、遮罩等效果代码

    这篇文章主要介绍了jQuery实现右键菜单、遮罩、弹出层效果,适应管理系统界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论