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 相关文章推荐
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 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微信公众号自动发送红包API
2016/06/01 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
为超链接加上disabled后的故事
2010/12/10 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
JS中的事件委托实例浅析
2018/03/22 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python类的继承和多态代码详解
2017/12/27 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
绿色学校实施方案
2014/03/31 职场文书
请假条范文大全
2014/04/10 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
陕西导游词
2015/02/04 职场文书
质量负责人岗位职责
2015/02/15 职场文书
天那边观后感
2015/06/09 职场文书