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 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
laravel学习教程之存取器
2016/07/30 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python 第一步 hello world
2009/09/25 Python
python实现单链表的方法示例
2019/09/03 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python suds访问webservice服务实现
2020/06/26 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
《要下雨了》教学反思
2014/02/17 职场文书
白血病捐款倡议书
2014/05/14 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
家属慰问信
2015/02/14 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python