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 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
vue实现分页栏效果
Jun 28 Javascript
Vue.js组件使用props传递数据的方法
Oct 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的FTP学习(四)
2006/10/09 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
思想汇报范文
2013/11/04 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
英语教研活动总结
2014/07/02 职场文书
立志成才演讲稿
2014/09/04 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript