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 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
详解javascript函数的参数
Nov 10 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
Node.js学习入门
Jan 03 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery的框架介绍
2016/05/11 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
jquery实现数字输入框
2017/02/22 Javascript
深入理解vue中的$set
2017/06/01 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue 打包体积优化方案小结
2020/05/20 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python素数检测的方法
2015/05/11 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
个人函授自我鉴定
2014/03/25 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
工程承包协议书
2014/10/20 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
python基础之文件处理知识总结
2021/05/23 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
python运行脚本文件的三种方法实例
2022/06/25 Python