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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
window.location.hash知识汇总
Nov 09 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
详解JS数值Number类型
Feb 07 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
vue使用echarts画组织结构图
Feb 06 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
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python函数与方法的区别总结
2019/06/23 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python的debug实用工具 pdb详解
2019/07/12 Python
python实现横向拼接图片
2020/03/23 Python
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
南京某公司笔试题
2013/01/27 面试题
村优秀党员事迹材料
2014/01/15 职场文书
公开服务承诺制度
2014/03/26 职场文书
学生鉴定评语大全
2014/05/05 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
教师工作决心书
2015/02/04 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers