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 相关文章推荐
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
javascript学习小结之prototype
Dec 03 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
让新消息在网页标题闪烁提示的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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jquery实现公告翻滚效果
2015/02/27 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
教师评优事迹材料
2014/01/10 职场文书
高中数学教学反思
2014/01/30 职场文书
公司合作意向书
2014/04/01 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
店铺转让协议书
2015/01/29 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
电视新闻稿
2015/07/17 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis