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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php操作access数据库的方法详解
2017/02/22 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
JavaScript解析URL参数示例代码
2013/08/12 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
基于vue实现分页效果
2017/11/06 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python实用代码片段收集贴
2015/06/03 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
运动会稿件300字
2014/02/14 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python