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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
让新消息在网页标题闪烁提示的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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP生成月历代码
2007/06/14 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
优秀部门获奖感言
2014/02/14 职场文书
八一建军节感言
2014/02/28 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
地道战观后感
2015/06/04 职场文书
给校长的建议书范文
2015/09/14 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
微信小程序调用python模型
2022/04/21 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers