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 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
使用express来代理服务的方法
Jun 21 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生成excel文件的简单方法
2014/02/08 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
javascript 写类方式之九
2009/07/05 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
python查看FTP是否能连接成功的方法
2015/07/30 Python
Django中FilePathField字段的用法
2020/05/21 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
学前班教师的自我鉴定
2013/12/05 职场文书
党员自我评价分享
2013/12/13 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
评先进个人材料
2014/12/29 职场文书
基层党建工作简报
2015/07/21 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Python基础之函数嵌套知识总结
2021/05/23 Python
python面向对象版学生信息管理系统
2021/06/24 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript