jquery监听div内容的变化具体实现思路


Posted in Javascript onNovember 04, 2013

我们做电子商务,javascript框架采用的是jQuery,在开发过程中遇到了上面标题列出的问题:如何监听div内容的变化。
先给出最终代码(后续进行相关分析):

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
粗略的明白是采用自定义事件的方式去处理问题,采纳代码如下:
$('#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内容定义,采纳代码如下:
jQuery.fn.watch = function( id, fn ) { 
returnthis.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) 
); 
}); 
returnself; 
}; 
jQuery.fn.unwatch = function( id ) { 
returnthis.each(function(){ 
clearInterval( $(this).data('watch_timer') ); 
}); 
};

创建自定义事件
jQuery.fn.valuechange = function(fn) { 
returnthis.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'); 
} 
};

貌似这样的解决是完美的但是后续再继续查看到时候,发现有更简洁的方式,代码如下:
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
Javascript 相关文章推荐
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 #Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
浅析return false的正确使用
Nov 04 #Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 #Javascript
js中apply方法的使用详细解析
Nov 04 #Javascript
js数组操作学习总结
Nov 04 #Javascript
Javascript执行效率全面总结
Nov 04 #Javascript
You might like
php一个找二层目录的小东东
2012/08/02 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
基于JavaScript 类的使用详解
2013/05/07 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Node.js实现文件上传
2016/07/05 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
Python中的rfind()方法使用详解
2015/05/19 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
需求分析说明书
2014/05/09 职场文书
爱心捐款感谢信
2015/01/20 职场文书
长征观后感
2015/06/09 职场文书
教师研修随笔感言
2015/11/18 职场文书