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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
Node.js API详解之 zlib模块用法分析
May 19 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
javascript 必知必会之closure
2009/09/21 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python如何实现代码检查
2019/06/28 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
拖鞋店创业计划书
2014/01/15 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
学校开学标语
2014/10/06 职场文书
年终工作总结范文
2019/06/20 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
Python字符串的转义字符
2022/04/07 Python